ElementUI Table组件，如何在多页数据下勾选多行(后端异步返回数据)

element-ui 的table表格可以轻松实现多选的功能，只要在表格列中增加type="selection"的属性。

但是大部分情况下，表格的数据是有分页的，分页一般是要请求后台接口，如果后端异步的返回数据，点击每页的时候才返回相应的数据，如何实现选中多行并记住之前选中的状态。

注意：全选功能实现不了，你只能传给后台一个标识，让他去做处理。比如导出全部等。

首先不要去使用 element-ui提供了reserve-selection属性。如果使用这个属性，你在下一页的全选复选框的点击是没有效果的。而且也不能触发@selection-change方法。

<template>
  <div>
    <p>选择多行数据时使用checkbox</p>
    <el-button type="primary" @click="getSelIds">获取选择的id</el-button>
    <div class="table taskcontent">
      <!--  -->
      <el-table :data="tabledata" @select="onSelect" @select-all="onSelectAll" style="width:100%" ref="multipleTable">
        <el-table-column type="selection" min-width="55" align="center" :reserve-selection="true"></el-table-column>
        <el-table-column prop="num" label="编号" min-width="120" align="center"></el-table-column>
        <el-table-column prop="name" label="任务名称" min-width="300" align="center"></el-table-column>
        <el-table-column prop="time" label="创建时间" min-width="300" align="center"></el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handlePageSize"
      @current-change="handleCurrentPage"
      :current-page="currentPage"
      :page-sizes="[3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selections: {}, // 保存已选择过的row
      currentPage: 1,
      pageSize: 3,
      total: 8,
      tabledata: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取数据列表
    getData() {
      // ...
    },
    onSelect(selection, row) {
      if (this.selections[row.id]) {
        delete this.selections[row.id];
      } else {
        this.selections[row.id] = row;
      }
    },
    // 全选情况
    onSelectAll(selection) {
      // 全选
      if (selection.length) {
        selection.forEach((row) => {
          this.selections[row.id] = row;
        });
      } else {
        // 取消全选
        this.tabledata.forEach((row) => {
          delete this.selections[row.id];
        });
      }
    },
    // 对已选择过的row勾选，返回到上一页时候
    checkRows() {
      const keys = Object.keys(this.selections);
      const rows = this.tabledata.filter((row) => {
        return keys.includes(String(row.u_id));
      });
      this.$nextTick(() => {
        rows.map((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      });
    },

    //获取选中的行的id值
    getSelIds() {
      let selections = Object.keys(this.selections);
      //由于Object.keys之后是字符串类型， 如果传递给后台的id是数字类型,需要转换过来。
      let ids = selections.map((item) => Number(item));
      console.log(ids);
      //如果是个别情况，获取之后需要清除选中状态的话，需要初始化一下
      // this.selections = {};
      // this.$refs.multipleTable.clearSelection();
    },
    handlePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getData();
    },
    async handleCurrentPage(currentPage) {
      this.currentPage = currentPage;
      await this.getData();
      this.checkRows(); //等待后台数据返回之后，处理回显处理（或者放在getData的回调去调用也可以）
    },
  },
};
</script>
<style scoped>
.operation-box {
  text-align: left;
  margin-left: 18px;
}
.el-button {
  margin-left: 20px;
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>