基於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>