前端table表格的全选/反选/跨页勾选（封装）

前提：项目需要，想要一个可以全选，反选，跨页勾选的需求。

如图：

前置条件1：table表格里面必须有一项是作为这一条数据的唯一值，比如：id，必须要有的！！我的案例是pathologyId，因为我们项目需要这个东西作为参数传给其他按钮。

前置条件2：点击全选按钮，需要调接口，让后端给你返全部需要勾选的数据：pathologyId，例如【1，2，3】这样我们才知道全选选哪些数据

前置条件3：点击反选按钮，需要调接口，让后端给你返全部需要勾选的数据：pathologyId，例如【1，2，3】这样我们才知道反选选哪些数据

以上准备好就可以了。

utils里面创建一个table.js，内容如下

/**
 * 全选操作时-全选当前页
 * @param {object} tableRef 表格ref对象
 * @param {Array<any>} currentPageData 当前页数据
 */
export const selectAllCurrentPage = (tableRef, currentPageData) => {
  if (tableRef) {
    currentPageData.forEach((row) => {
      tableRef.toggleRowSelection(row, true)
    })
  }
}

/**
 * 手动选中/取消选中
 * @param {Array} selection 当前页选中列表
 * @param {Array} selectIds 跨页选中的id列表
 * @param {Array} currentPageData 当前页数据
 * @param {string} key 每条数据的key
 * @returns {Array<any>} _selectIds
 */
export const selectionChange = (selection, selectIds, currentPageData, key = 'id') => {
  let _selectIds = [...selectIds]
  const currentPageSelectIds = (selection || []).map((it) => it[key])
  _selectIds = [..._selectIds, ...currentPageSelectIds]

  currentPageData &&
    currentPageData.forEach((it) => {
      if (!currentPageSelectIds.includes(it[key])) {
        _selectIds = _selectIds.filter((_id) => _id !== it[key])
      }
    })
  _selectIds = [...new Set([..._selectIds])] // 去重
  return _selectIds
}

/**
 * 切换页码时，显示当前页已选中的，即已在selectIds中的，不在selectIds中的则取消选中
 * @param {object} tableRef 表格ref对象
 * @param {Array} currentPageData 当前页数据
 * @param {Array} selectIds 跨页选中的id列表
 * @param {string} key 每条数据的key
 */
export const selectCurrentOnChangePage = (tableRef, currentPageData, selectIds, key = 'id') => {
  if (tableRef) {
    currentPageData.forEach((row) => {
      if (selectIds.includes(row[key])) {
        tableRef.toggleRowSelection(row, true)
      } else {
        tableRef.toggleRowSelection(row, false)
      }
    })
  }
}

页面使用时：

先引用：

import { selectAllCurrentPage, selectionChange, selectCurrentOnChangePage } from '@/utils/table'

先定义selectListIds ：【】,为了知道哪些数据是要选中的。

selectAllCurrentPage这个是全选方法。selectCurrentOnChangePage反选的方法

        selectAll() {
            defaultParams 是我们项目需求的参数，然后调接口那全选返回的ids
      const defaultParams = this.getRequestListParams()
      selectPathologyAll(defaultParams).then((res) => {
        this.selectListIds = res.data || []
        selectAllCurrentPage(this.$refs.table, this.tableData)
      })
    },

   * 反选
     */
    unSelect() {
      const defaultParams = this.getRequestListParams()
      selectPathologyReverse(defaultParams, this.selectListIds).then((res) => {
        this.selectListIds = res.data || []
        selectCurrentOnChangePage(this.$refs.table, this.tableData, this.selectListIds, 'pathologyId')
      })
    },

表格里面记得使用第二个引入的方法selectionChange：

  <el-table
        ref="table"
        class="list-table"
        :data="tableData"
        style="width: 100%"
        height="100%"
        stripe
        @select-all="selectionChange"
        @select="selectionChange"
        @sort-change="sortChange"
      >

methods里面：
     * 表格勾选
     * @param {Array} selection
     */
    selectionChange(selection) {
      this.selectListIds = selectionChange(selection, this.selectListIds, this.tableData, 'pathologyId')
    },

切分页/页码数时候

    handleSizeChange(val) {
      this.params.pageSize = val
      this.params.pageNum = 1
      this.getList().then(() => {
        selectCurrentOnChangePage(this.$refs.table, this.tableData, this.selectListIds, 'pathologyId')
      })
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getList().then(() => {
        selectCurrentOnChangePage(this.$refs.table, this.tableData, this.selectListIds, 'pathologyId')
      })
    },

以上就结束了。亲测好用极了

非常简单