基于el-table，实现一个简单分页多选功能

分页时，仍然保留勾选的数据和选中的状态。

实现思路：利用对象属性不可重复的特性

代码如下：

<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      size="small"
      height="100%"
      @selection-change="handleSelectChange"
      @select="handleSelect"
    >
      <el-table-column width="50" type="selection" />
      <el-table-column type="index" label="序号" width="50">
        <template scope="scope">
          <span>{{
            (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称1" />
      <el-table-column label="名称2" />
      <el-table-column label="名称3" />
      <el-table-column label="名称4" />
      <el-table-column label="名称5" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      selectedObj: {},
      selectedData: []
    }
  },
  methods: {
    getList() {
      // 查数据的地方，处理分页选中状态
      this.handleRowSelection(this.tableData)
    },
    handleSelectChange(selection) {
      // 全选取消，删除当前页所有数据
      if (selection.length === 0) {
        this.tableData.forEach(item => {
          delete this.selectedObj[item.id]
        })
      }
      // 勾选数据 添加
      selection.forEach(item => {
        this.selectedObj[item.id] = item
      })
      // 获取所有分页勾选的数据
      this.selectedData = []
      for (const key in this.selectedObj) {
        this.selectedData.push(this.selectedObj[key])
      }
    },
    handleSelect(selection, row) {
      // 取消单个勾选时，删除对应属性
      if (!selection.some(item => item.id === row.id)) {
        delete this.selectedObj[row.id]
      }
    },
    // 处理当前列表选中状态
    handleRowSelection(data) {
      data.forEach(item => {
        if (this.selectedObj[item.id]) {
          this.$nextTick(() => {
            this.$refs.table.toggleRowSelection(item)
          })
        }
      })
    }
  }
}
</script>