vue + Element ui 中使用table组件实现分页记忆选中

直接上代码

<el-table @selection-change="handleSelectionChange" :data="tableData" ref="multipleTable" border style="width: 100%">
      <el-table-column type="selection" width="55" :selectable="checkboxT"></el-table-column>
      <el-table-column prop="brokerName" label="经纪人"></el-table-column>
      <el-table-column prop="companyName" label="所属经纪公司"></el-table-column>
      <el-table-column prop="orderId" label="订单号"></el-table-column>
      <el-table-column prop="customerName" label="客户姓名"></el-table-column>
      <el-table-column :formatter="customerPhone" label="客户手机号"></el-table-column>
      <el-table-column prop="devName" label="楼盘"></el-table-column>
      <el-table-column prop="houseNum" label="房间号"></el-table-column>
      <el-table-column prop="nodeName" label="结佣类别"></el-table-column>
      <el-table-column :formatter="nodeAmount" label="奖励金额（元）"></el-table-column>
      <el-table-column  label="奖励方式">
        <template slot-scope="scope">
          <span v-if="scope.row.awardType == 1">购物卡</span>
          <span v-if="scope.row.awardType == 2">现金</span>
        </template>
      </el-table-column>
      <el-table-column :formatter="auditTime" label="审核时间"></el-table-column>
    </el-table>

data() {
    return {
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      idKey: "id" // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
    }
  },
methods: {
    // 设置选中的方法
    setSelectRow() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
        return;
      }
      let idKey = this.idKey;
      let selectAllIds = [];
      // 遍历总的所选中数据取出list 的 id push 到 总选中的id集合中
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      this.$refs.multipleTable.clearSelection();
      //  遍历列表 用全部选中的id集合 中有 list的id 则改条数据未选中状态
      for (let i = 0; i < this.tableData.length; i++) {
        if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
          this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
        }
      }
    },
    // 记忆选择核心方法
    changePageCoreRecordData() {
      let idKey = this.idKey;
      let that = this;
      if (this.multipleSelectionAll.length <= 0) {
        this.multipleSelectionAll = this.multipleSelection;
        return;
      }
      let selectAllIds = [];
      this.multipleSelectionAll.forEach(row => {
        selectAllIds.push(row[idKey]);
      });
      console.log('总选择的key', selectAllIds)
      let selectIds = [];
      this.multipleSelection.forEach(row => {
        selectIds.push(row[idKey]);
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row);
        }
      });
      let noSelectIds = [];
      this.tableData.forEach(row => {
        if (selectIds.indexOf(row[idKey]) < 0) {
          noSelectIds.push(row[idKey]);
        }
      });
      noSelectIds.forEach(id => {
        if (selectAllIds.indexOf(id) >= 0) {
          for (let i = 0; i < that.multipleSelectionAll.length; i++) {
            if (that.multipleSelectionAll[i][idKey] == id) {
              that.multipleSelectionAll.splice(i, 1);
              break;
            }
          }
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // *** 这个执行的时间一定要小于 list 接口的 setTimeout 的时间 ，否则 在分页跳转后 上一个页面不会优先标记当前页面已选中的 数据 的标识
      setTimeout(()=>{
        this.changePageCoreRecordData()
      },500)
    },
handleSizeChange(size) {
      this.changePageCoreRecordData();
      this.ruleForm.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.changePageCoreRecordData();
      this.ruleForm.pageNum = page;
      this.list();
    },
    list() {
      // 调用接口拿数据 
      this.axios.post(api.batchOrderList, this.ruleForm).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          setTimeout(() => {
              this.setSelectRow();
          }, 200);
        }
      });
    },
}