关于Element-UI的穿梭框数据量大时，点击‘全选’卡顿问题解决

现象：

el-transfer会一次性渲染所有数据，如果我们渲染上千条数据，需要的时间比较久，大约需要十几秒的时间，如果成千上万条，会有很明显的卡顿现象，我是把transfer穿梭框进行分页处理，解决卡顿问题。

• 穿梭框左右更改

//穿梭change
    transferChange(current: any, direction: any, move: any) {
      //为了保证数据的一致性，目标数组还回来之后要插进当前数据变量
      if (direction == "left") {
        this.currentDatas = this.sourceDatas.filter(
          function (val: any) {
            return !current.includes(val.valve_id);
          }.bind(this)
        );
        let arrLength = this.currentDatas.length;
        console.log(arrLength);
        this.page.total = arrLength;
      }
    },

• 分页改变时：

 handleCurrentChange(val: any) {
      this.page.pageNo = val;
      let allvalues = this.allValue as any;
      //先将选中的从当前数据过滤掉
      this.currentDatas = this.currentDatas.filter(
        function (value: any) {
          return !allvalues.includes(value.valve_id);
        }.bind(this)
      );
      //再将过滤好的当前数据选出指定页
      this.virtualList = this.groupFunc(val);
      //再将选中的目标数组补给当前页变量，从而保证之前选的数据能显示
      let allvaluesa = this.allValue as any;
      this.virtualList = this.virtualList.concat(
        this.sourceDatas.filter(
          function (val: any) {
            return allvaluesa.includes(val.valve_id);
          }.bind(this)
        )
      );
    },

//数组分组函数
    groupFunc(val: any) {
      var currentDatas = [];
      let arrLength = this.currentDatas.length;
      this.page.total = arrLength;
      let num = 100;
      let index = 0;
      for (let i = 0; i < arrLength; i++) {
        if (i % num === 0 && i !== 0) {
          currentDatas.push(this.currentDatas.slice(index, i));
          index = i;
        }
        if (i + 1 === arrLength) {
          currentDatas.push(this.currentDatas.slice(index, i + 1));
        }
      }
      return currentDatas[val - 1];
    },

• 搜索功能

//穿梭搜索
    filterChange(query: any) {
      let allvalues = this.allValue as any;
      //自定义搜索，从当前数组变量中过滤，再渲染回组件
      var currentDatas = this.sourceDatas.filter(
        function (val: any) {
          return (
            val.name.indexOf(query) > -1 && !allvalues.includes(val.valve_id)
          );
        }.bind(this)
      );
      if (currentDatas.length != this.currentDatas.length) {
        this.currentDatas = currentDatas;
        this.handleCurrentChange(1);
      }
    },

• 效果图如下：