element穿梭框分页+搜索功能

前言，当我们使用穿梭框时，正好需要做大数据量的选择，加载上千条数据穿梭框的识别速度就开始特别缓慢，所以只好考虑做分页。

 

做分页的过程中会遇到两个问题：

1、源数据切换时，右侧目标数据也会跟着切换，导致无法显示翻页前选中的数据

2、搜索功能是两侧通用，导致无法对总的源数据进行过滤

 

首先，解决问题一的思路：每次切换页码后给源数据补上之前的目标数据；

解决问题二的唯一思路：只能抛弃自带的搜索功能，自定义搜索；

html：

<el-transfer
          target-order="unshift"
          v-model="formDatas.river"
          @change="transferChange"
          :titles="['河段列表', '选中河段']"
          :data="currentPageDatas"
          :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"
        >
          <el-pagination
            small
            slot="left-footer"
            align="right"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-size="page.pageSize"
            :total="page.total"
            :pager-count="5"
            layout="prev, pager, next"
          ></el-pagination>
</el-transfer>

js：

data()function{
  return{
      currentPageDatas: [],
      currentDatas: [],
      sourceDatas: [],
      page: { pageNo: 1, pageSize: 20, total: 0 },
   }  
},
method:{
    init() {
      var url = "requiredUrl";
      this.$parent.$parent.openLoading();
      xhrGet(
        url,
        function (res) {
          if (res.code) {
            var currentDatas = res.data.map((value, index) => {
              return {
                label: value.sectionName,
                key: index,
                obj: value,
              };
            });
            let arrLength = currentDatas.length;
            this.page.total = arrLength;
            this.currentDatas = currentDatas;
            this.sourceDatas = currentDatas;
            //初始化20条数据给当前第一页的变量
            this.currentPageDatas = this.currentDatas.slice(0, 20);
          } else {
            this.$message.error(res.msg);
          }
          this.$parent.$parent.closeLoading();
        }.bind(this)
      );
    },
    //分页change
    handleCurrentChange(val) {
        //先将选中的从当前数据过滤掉
      this.currentDatas = this.currentDatas.filter(
        function (value) {
          return !this.formDatas.river.includes(value.key);
        }.bind(this)
      );
        //再将过滤好的当前数据选出指定页
      this.currentPageDatas = this.groupFunc(val);
       //再将选中的目标数组补给当前页变量，从而保证之前选的数据能显示
      this.currentPageDatas = this.currentPageDatas.concat(
        this.sourceDatas.filter(
          function (val) {
            return this.formDatas.river.includes(val.key);
          }.bind(this)
        )
      );
    },
    //穿梭change
    transferChange(current, direction, move) {
      //为了保证数据的一致性，目标数组还回来之后要插进当前数据变量
      if (direction == "left") {
        this.currentDatas = this.sourceDatas.filter(
          function (val) {
            return !current.includes(val.key);
          }.bind(this)
        );
        let arrLength = this.currentDatas.length;
        this.page.total = arrLength;
      }
    },
    //穿梭搜索
    filterChange(query) {
    //自定义搜索，从当前数组变量中过滤，再渲染回组件
      var currentDatas = this.sourceDatas.filter(
        function (val) {
          return (
            val.obj.sectionName.indexOf(query) > -1 &&
            !this.formDatas.river.includes(val.key)
          );
        }.bind(this)
      );
      if (currentDatas.length != this.currentDatas.length) {
        this.currentDatas = currentDatas;
        this.handleCurrentChange(1);
      }
    },

    //数组分组函数
    groupFunc(val) {
      var currentDatas = [];
      let arrLength = this.currentDatas.length;
      this.page.total = arrLength;
      let num = 20;
      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];
    },  

最后的效果图展现：

 

 

 

 

 

currentPageDatas