iview table 分页记忆功能

tool.js

 
     uniqueArr(arr, key = null) {
        const res = new Map();
        // 根据属性去重
        if (key) {
          return arr.filter(a => !res.has(a[key]) && res.set(a[key], 1));
        } else {
          // 元素去重
          return arr.filter(a => !res.has(a) && res.set(a, 1));
        }
  },

xxx.vue

data(){
    return {
     selectedData: [],//table当前操作的量
     RselectedData: [], //用户一番操作后，最终选中的数据
    }
}


   
   methods:{
    setSelectChecked() {
      // 这个函数在每次切换分页的时候执行，这里分页封装了，这个函数放到tablesearch里面执行
      const { RselectedData } = this;
      // 把当前页的数据送到 RselectedData 里面做一次循环，加上checked属性
      this.tableDatas.forEach(v => {
        if (RselectedData.some(r => r.id === v.id)) {
          v._checked = true;
        }
      });
    },
    //在table上加上四个选择操作函数
    recordSelected() {
      const { RselectedData, selectedData } = this;
      this.RselectedData = tools.uniqueArr(
        [...RselectedData, ...selectedData],
        "id"
      );
    
    },
    onSelect(selection, row) {
      this.selectedData = selection;
      this.recordSelected();
    },
    onSelectCancel(selection, row) {
      this.RselectedData = this.RselectedData.filter(
        item => item.id !== row.id
      );
    },
    onSelectAll(selection) {
      this.selectedData = selection;
      this.recordSelected();
  
    },
    onSelectAllCancel(selection) {
      // 这里假设就是从后台选过来的数据，这个时候只需要考虑把后台过来的数据里的id元素去掉
      const { tableDatas } = this;
      this.RselectedData = this.RselectedData.filter(
        item => !tableDatas.find(v => v.id === item.id)
      );
    },
   }