现象：

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

• 穿梭框左右更改

//穿梭changetransferChange(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.allValueas 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.allValueas 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.allValueas 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);}},

• 效果图如下：