el-table 分页多选可回显

<template>
  <div>
    <el-table
      :data="tableData"
      border
      ref="table"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="加载中..."
      @selection-change="handleSelectionChange"
      :row-key="key"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true" align="center">
      </el-table-column>
      <template>
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          align="center"
          header-align="center"
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :width="item.width"
        />
      </template>
    </el-table>
    <div
      v-if="total > 0"
      style="margin-top: 10px; display: flex; justify-content: flex-end"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="propObj.pageNum"
        :page-size="propObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key(row) {
        return row.transId; //这里的key必须是唯一值
      },
      propObj: { pageSize: 10, pageNum: 1 },
      tableData: [],
      total: 0,
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      idKey: "transId", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
    };
  },

  mounted() {
    this.getqueryNoClaimSicList();
    this.getTableDatas();
  },

  methods: {
    // 设置选中的方法
    setSelectRow() {
      if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
        return;
      }
      // 标识当前行的唯一键的名称
      let idKey = this.idKey;
      let selectAllIds = [];
      let that = this;
      this.multipleSelectionAll.forEach((row) => {
        console.log(row);
        selectAllIds.push(row[idKey]);
      });
      this.$refs.table.clearSelection();
      for (var i = 0; i < this.tableData.length; i++) {
        if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
          // 设置选中，记住table组件需要使用ref="table"
          this.$refs.table.toggleRowSelection(this.tableData[i], true);
        }
      }
    },

    changePageCoreRecordData() {
      // 标识当前行的唯一键的名称
      let idKey = this.idKey;
      let that = this;
      // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
      if (this.multipleSelectionAll.length <= 0) {
        this.multipleSelectionAll = this.multipleSelection;
        return;
      }
      // 总选择里面的key集合
      let selectAllIds = [];
      this.multipleSelectionAll.forEach((row) => {
        selectAllIds.push(row[idKey]);
      });
      let selectIds = [];
      // 获取当前页选中的id
      this.multipleSelection.forEach((row) => {
        selectIds.push(row[idKey]);
        // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
        if (selectAllIds.indexOf(row[idKey]) < 0) {
          that.multipleSelectionAll.push(row);
        }
      });
      let noSelectIds = [];
      // 得到当前页没有选中的id
      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;
            }
          }
        }
      });
    },

    getAllSelectionData() {
      // 再执行一次记忆勾选数据匹配，目的是为了在当前页操作勾选后直接获取选中数据
      this.changePageCoreRecordData();
      console.log(this.multipleSelectionAll, "231313212313");
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    getTableDatas() {
      getTableData(this.params).then((res) => {
        this.tableData = res.data;
        this.total = res.recordsFiltered;
        this.setSelectRow();
      });
    },
    handleSizeChange(currentSize) {
      this.propObj.pageSize = currentSize;
      //再执行一次记忆勾选数据匹配
      this.getqueryNoClaimSicList();
      this.getTableDatas();
    },
    handleCurrentChange(currentPage) {
      this.propObj.pageNum = currentPage;
      //再执行一次记忆勾选数据匹配
      this.getqueryNoClaimSicList();
      this.getTableDatas();
    },
  },
};
</script>