如何实现element穿梭框性能优化

本文主要讲解“如何优化元件梭架的性能”。本文的讲解内容简单明了，易学易懂。请跟随边肖的思路，一起学习学习“如何优化元素穿梭架的性能”。

目录

背景。

解决方案

新问题

先进的

背景

当穿梭框处理大量数据时，渲染过多的DOM节点，导致页面被卡住。

在尽可能不改变组件原有逻辑的前提下，进行优化。

00-1010惰性加载-infinismecroll组件。

先从包中拷贝出原始组件/转移(或者更改源代码并重新打包以维护私有库供使用)。

将

v-无限滚动='pageDown '

3360无限滚动-立即=' false '添加到。

El-复选框-组

v-show='！hasNoMatchdata.length0 '

v型=“已检查”

:size='size '

:class='{ '是-filterable':filterable} '

class='el-transfer-panel__list '

v-无限滚动='pageDown '

:无限滚动-立即='假'

el复选框

class='el-transfer-panel__item '

:label='item[keyProp]'

: disabled=' item[disabled prop]'

:key='item[keyProp]'

v-for='iteminfilteredData '

option-content : option=' item '/option-content

/El-复选框

/el-checkbox-group在数据中定义pageSize: 20来表示每页的数据数量。Showdata3360 []仅用于显示和替换上述代码中实际需要操作的数据filteredData。

v-for='iteminnb

sp;showData">

同时在watch中相应的处理

data (data) {
    const checked = [];
    this.showData = data.slice(0, this.pageSize);
    const filteredDataKeys = this.filteredData.map(
    (item) => item[this.keyProp]
    );
    this.checked.forEach((item) => {
    if (filteredDataKeys.indexOf(item) > -1) {
        checked.push(item);
    }
    });
    this.checkChangeByUser = false;
    this.checked = checked;
},
filteredData (filteredData) {
    this.showData = filteredData.slice(0, this.pageSize);
 }

初始化展示数量随意这里取 20。

最后添加滚动到底部时调用的方法

pageDown () {
    const l = this.showData.length;
    const totalLength = this.filteredData.length
    l < totalLength && 
    (this.showData = this.filteredData.slice(0, l + this.pageSize > totalLength ?
    totalLength : l + this.pageSize));
},

往下滚动的时候 展示的数据长度增加 20（数量随意）, 超出时展示最大长度。

由此基本解决大数据量操作卡顿的问题。由于展示和逻辑层分开，组件的所有操作逻辑无须修改，最小程度减少差异。

新问题

手动滚动到列表末端，再进行搜索操作依然存在卡顿问题。

进阶

在滚动过程中，实际上顶端的数据依旧无法看见，该数据不展示，对用户体验也没有影响，
所以只需展示当前页的 20 条数据。

我们为el-checkbox-group添加一个 ref=scrollContainer 以便操作滚动条，

在data中定义当前页数 curIndex: 1

并对 pageDown 方法进行修改

pageDown () {
      const totalLength = this.filteredData.length
      if((this.curIndex*this.pageSize) < totalLength){
        this.curIndex ++
        const targetLength = this.curIndex * this.pageSize 
        const endPoint = targetLength > totalLength ? totalLength : targetLength
        const startPoint = endPoint - this.pageSize  > 0 ? endPoint - this.pageSize : 0
        this.showData = this.filteredData.slice(startPoint, endPoint);
        this.$refs.scrollContainer.$el.scrollTop = "1px" //滚动条到最上端，衔接下一页，为 0 可能会触发边界问题
      }
    }

为此我们还需要添加向上翻页的方法

InfiniteScroll 指令 只提供向下滚动，我们可以拓展该指令亦可自行添加上滑滚动监听
    mounted(){
        this.$refs.scrollContainer.$el.addEventListener('scroll', this.pageUp)
    },
    beforeDestroy(){
        this.$refs.scrollContainer.$el.removeEventListener('scroll', this.pageUp)
    },

注册pageUp 方法

pageUp(e){
      if(e.target.scrollTop ===0 && this.curIndex>1){
        this.curIndex --
        const endPoint = this.curIndex * this.pageSize 
        const startPoint = (this.curIndex-1)* this.pageSize 
        this.showData = this.filteredData.slice(startPoint, endPoint);
        const el = this.$refs.scrollContainer.$el
        el.scrollTop = el.scrollHeight - el.clientHeight - 1 // 滚动到最底部，衔接上一页， -1 防止边界问题。
      }
    },

当进行数据操作的时候，页面内容变化，滚动条也会随之变化，为防止不能预知的翻页，数据改变时，重置滚动条和当前页码。

initScroll(){
        this.curIndex = 1
        this.$refs.scrollContainer.$el.scrollTop = 0
    },

同时地，在watch中相应时候执行 initScroll

data(){
        ...
        this.initScroll()
        ...
    },
    filteredData (filteredData) {
      ...
      this.initScroll()
    }

至此大数据量的穿梭框，性能大为改善。

感谢各位的阅读，以上就是“如何实现element穿梭框性能优化”的内容了，经过本文的学习后，相信大家对如何实现element穿梭框性能优化这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！