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