elementui样式穿透,element样式穿透
本文主要介绍了元素穿梭框性能优化，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
背景解决思路新问题进阶
背景
穿梭框处理大数据量时，由于渲染的数字正射影像图节点过多，造成页面卡顿的问题。
在尽量不改变组件原有逻辑的前提下，进行优化。
解决思路
懒加载-无限小球组件
先从包装/转移中将原组件拷出（或者改源码重新打包维护私有库使用)
将
v无限滚动=pageDown
:infinite-scroll-immediate= false
添加到
埃尔-复选框-组
v-show=！哈斯诺玛奇数据长度0
v-model=已检查
:size=size
:class={ 是可筛选的：可筛选}
el-transfer-panel__list
v无限滚动=pageDown
:infinite-scroll-immediate= false
埃尔-复选框
el-transfer-panel__item
:label=item[keyProp]
:disabled=item[disabledProp]
:key=item[keyProp]
v-for=过滤的数据中的项目
选项内容：选项=项目/选项内容
/El-复选框
/el-checkbox-group
在数据中定义页面大小：20用来表示每页数据个数showData: []仅用来展示使用，替换上述代码中实际需要操作的数据过滤数据
v-for= showData中的项目
同时在看中相应的处理
数据（数据){
检查的常量=[];
this.showData=data.slice(0，this。pagesize)；
const过滤数据键=this。过滤后的数据。地图(
(item)=item[this.keyProp]
);
this.checked.forEach((item)={
if(filtereddatakeys。(项目)-1)的索引{
已检查.推送(项目);
}
});
this.checkChangeByUser=false
this.checked=已检查；
},
filteredData (filteredData) {
这个。showdata=已过滤的数据。切片(0，这个。pagesize)；
}
初始化展示数量随意这里取20。
最后添加滚动到底部时调用的方法
pageDown () {
const l=this。显示数据。长度；
const总长度=this。过滤后的数据。长度
我的总长度
(这个。showdata=this。过滤后的数据。slice(0，l this.pageSize totalLength？
总长度：l本。pagesize))；
},
往下滚动的时候展示的数据长度增加20(数量随意), 超出时展示最大长度。
由此基本解决大数据量操作卡顿的问题。由于展示和逻辑层分开，组件的所有操作逻辑无须修改，最小程度减少差异。
新问题
手动滚动到列表末端，再进行搜索操作依然存在卡顿问题。
进阶
在滚动过程中，实际上顶端的数据依旧无法看见，该数据不展示，对用户体验也没有影响，
所以只需展示当前页的20 条数据。
我们为埃尔-复选框-组添加一个ref=容器以便操作滚动条，
在数据中定义当前页数库索引：1
并对向下翻页方法进行修改
pageDown () {
const总长度=this。过滤后的数据。长度
如果((这个。库索引*这个。pagesize)总长度){
this.curIndex
const目标长度=this。库索引*这个。页面大小
const endPoint=目标长度总长？总长度：目标长度
常量起点=终点-this。pagesize 0？端点- this.pageSize : 0
这个。showdata=this。过滤后的数据。切片(起点、终点)；
这个参考文献。滚动容器。$ El。scroll top= 1px //滚动条到最上端，衔接下一页，为0 可能会触发边界问题
}
}
为此我们还需要添加向上翻页的方法
无限小球指令只提供向下滚动，我们可以拓展该指令亦可自行添加上滑滚动监听
已安装(){
这个参考文献。滚动容器。$ El。addevent侦听器( scroll ，this.pageUp)
},
销毁前(){
这个。$ refs . scroll container . $ El . removeeventlistener( scroll ，this.pageUp)
},
注册分页方法
翻页(e){
if(e . target . scroll top===0 this . curindex 1){
this.curIndex
const endPoint=this . curindex * this . pagesize
const start point=(this . curindex-1)* this . pagesize
this . showdata=this . filtered data . slice(start point，endPoint)；
const el=this。$refs.scrollContainer.$el
El . Scroll top=El . Scroll height-El . client height-1//滚动到底部与上一页连接，-1防止边界问题。
}
},
当数据被操作时，滚动条也会随着页面内容的变化而变化。为了防止不可预知的翻页，请在数据更改时重置滚动条和当前页码。
initScroll(){
this.curIndex=1
这个。$ refs . scroll container . $ El . scroll top=0
},
同时，在手表中相应的时间执行initScroll。
data(){
.
this.initScroll()
.
},
filteredData (filteredData) {
.
this.initScroll()
}
到目前为止，大数据量的穿梭帧的性能有了很大的提高。
这就是本文关于元素穿梭盒性能优化的实现。有关元素穿梭箱性能优化的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。