el-table分页多选操作在使用 Element UI 的 el-table 组件时，我们常常会遇到需要实现多选表格的

在使用 Element UI 的 el-table 组件时，我们常常会遇到需要实现多选表格的场景。当表格存在分页时，用户在切换页面后，希望之前勾选的数据依然保持选中状态。同时，在进行编辑操作后，再次操作勾选时，也能维持原来选中的数据。本文将结合具体代码，详细介绍如何实现这一功能。

实现思路

要实现分页多选且编辑后保持选中状态，主要需要处理以下几个方面：

勾选逻辑：处理单行勾选和全选操作。
分页处理：在切换分页时，重新请求数据并恢复之前的勾选状态。
数据存储：使用一个变量来存储所有选中的数据，确保在页面切换和编辑操作后数据不会丢失。

代码实现

<template>
  <div class="group-users">
      <el-table row-key="id" ref="SlotTableData" :data="tableData['records']" style="width: 100%" stripe  border
        @select="(selection, row) => selectOne(selection, row)" @select-all="(selection) => selectAll(selection)">
        <template slot="empty">
          <idss-no-data></idss-no-data>
        </template>
        <el-table-column type="selection" width="45" align="center"></el-table-column>
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <!-- 其他表格列 -->
      </el-table>
      <app-pagination :tableData="tableData" @page-change="tableDataChange" @size-change="tableDataChange"></app-pagination>
  </div>
</template>
<script>
import globalMixins from '@/mixins/globalMixins.js'
export default {
  mixins: [globalMixins],
  props: {
    dataRangeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dataLevelList: [
        { label: '重要数据', value: 1 },
        { label: '核心数据', value: 2 },
        { label: '一般数据', value: 3 }
      ],
      // 其他数据列表
      mulSelection: [],
      tableData: {}
    }
  },
  methods: {
    // 单行勾选逻辑
    selectOne (selection, row) {
      if (this.mulSelection.map(item => item.id).includes(row.id)) {
        this.mulSelection = this.mulSelection.filter(item => item.id !== row.id)
      } else {
        this.mulSelection.push({
          id: row.id,
          dataItemName: row.dataItemName,
          dataLevel: row.dataLevel
        })
      }
      this.$emit('select-change', this.mulSelection)
    },
    // 全选逻辑
    selectAll (selection) {
      if (selection.length > 0) {
        let newItems = selection.map(item => ({
          id: item.id,
          dataItemName: item.dataItemName,
          dataLevel: item.dataLevel
        }))
        this.mulSelection = [...new Set([...this.mulSelection, ...newItems].map(item => JSON.stringify(item)))].map(item => JSON.parse(item))
      } else {
        let newIds = this.tableData.records.map(item => item.id)
        this.mulSelection = this.mulSelection.filter(item => !newIds.includes(item.id))
      }
      this.$emit('select-change', this.mulSelection)
    },
    // 分页变化处理
    tableDataChange (params) {
      this.tableChange(params, this.tableData, this.getTableData)
    },
    // 获取表格数据
    getTableData  () {
      this.requestTable({
        url: '/xxx/list',
        method: 'post',
        currentObj: this.tableData
      }, {
        tag: 'get-point-table'
      }).then(res => {
        this.tableData = Object.assign({}, res)
        this.resetTableSelection()
      })
    },
    // 恢复勾选状态
    resetTableSelection () {
      this.$nextTick(() => {
        this.tableData.records.forEach((row) => {
          if (this.mulSelection.map(item => item.id).includes(row.id)) {
            this.$refs.SlotTableData.toggleRowSelection(row, true)
          }
        })
      })
    }
  },
  created () {
    this.getTableData()
  }
}
</script>

四、勾选逻辑

selectOne 方法：当用户点击单行勾选框时，检查该数据是否已经在 mulSelection 数组中。如果存在，则从数组中移除；如果不存在，则添加到数组中。
selectAll 方法：当用户点击全选框时，根据选择状态更新 mulSelection 数组。如果选择了全选，则将当前页的所有选中数据添加到 mulSelection 中；如果取消全选，则从 mulSelection 中移除当前页的数据。
1. 分页处理
tableDataChange 方法：当分页参数发生变化时，调用 getTableData 方法重新请求数据。
getTableData 方法：请求新的表格数据，并在数据返回后调用 resetTableSelection 方法恢复勾选状态。
1. 恢复勾选状态
resetTableSelection 方法：在数据更新后，遍历当前页的所有数据，检查其 id 是否在 mulSelection 数组中。如果存在，则将该行设置为选中状态。