Vue3 + Element Plus 实现表格全选/反选/禁用功能(示例详解)

<template>
  <div class="table-demo">
    <el-table
      ref="tableRef"
      :data="tableData"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" :selectable="checkSelectable" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="status" label="状态" />
    </el-table>
    <div class="operate-btns">
      <el-button @click="toggleAll">全选/反选</el-button>
      <el-button @click="reverseSelect">反选</el-button>
    </div>
  </div>
</template>

import { ref } from 'vue'
interface TableItem {
  id: number
  name: string
  age: number
  status: '正常' | '禁用'
}
// 响应式数据
const tableRef = ref()
const tableData = ref<TableItem[]>([
  { id: 1, name: '张三', age: 25, status: '正常' },
  { id: 2, name: '李四', age: 30, status: '禁用' },
  // 更多数据...
])
// 禁用判断方法
const checkSelectable = (row: TableItem) => {
  return row.status !== '禁用'
}

const toggleAll = () => {
  // 获取当前页所有可选项
  const selectableRows = tableData.value.filter(row => checkSelectable(row))
  // 判断是否需要全选
  const shouldSelectAll = selectableRows.some(row => 
    !tableRef.value?.getRowSelected(row)
  )
  tableData.value.forEach(row => {
    if (checkSelectable(row)) {
      tableRef.value?.toggleRowSelection(row, shouldSelectAll)
    }
  })
}

const reverseSelect = () => {
  const currentSelection = tableRef.value?.getSelectionRows() || []
  const selectableRows = tableData.value.filter(row => checkSelectable(row))
  selectableRows.forEach(row => {
    const isSelected = currentSelection.some(
      (selected: TableItem) => selected.id === row.id
    )
    tableRef.value?.toggleRowSelection(row, !isSelected)
  })
}

// 存储选中ID
const selectedIds = ref<number[]>([])
// 监听选中变化
const handleSelectionChange = (rows: TableItem[]) => {
  selectedIds.value = rows.map(row => row.id)
}
// 分页切换时恢复选中
const handlePageChange = () => {
  nextTick(() => {
    tableData.value.forEach(row => {
      if (selectedIds.value.includes(row.id)) {
        tableRef.value?.toggleRowSelection(row, true)
      }
    })
  })
}

::v-deep .el-table__header-wrapper .el-checkbox {
  display: inline-flex;
  &__inner::after {
    border-color: #fff;
  }
  &.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

<el-table :row-class-name="setDisabledStyle">
<script>
const setDisabledStyle = ({ row }: { row: TableItem }) => {
  return row.status === '禁用' ? 'disabled-row' : ''
}
</script>
<style>
.disabled-row {
  opacity: 0.6;
  cursor: not-allowed;
  td:first-child .el-checkbox {
    display: none;
  }
}
</style>

<template>
  <div class="table-container">
    <el-table
      ref="tableRef"
      :data="tableData"
      :row-class-name="setDisabledStyle"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column 
        type="selection" 
        width="55" 
        :selectable="checkSelectable" 
      />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="status" label="状态" />
    </el-table>
    <div class="table-actions">
      <el-button type="primary" @click="toggleAll">
        {{ isAllSelected ? '取消全选' : '全选' }}
      </el-button>
      <el-button @click="reverseSelect">反选</el-button>
      <span class="selected-count">已选：{{ selectedIds.length }} 项</span>
    </div>
    <el-pagination 
      layout="prev, pager, next" 
      :total="50" 
      @current-change="handlePageChange"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'
// 数据与状态定义...
// 此处插入前面章节的实现代码
</script>
<style scoped>
/* 样式优化代码... */
</style>