<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="狀態(tài)" />
    </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: '正常' | '禁用'
}
// 響應(yīng)式數(shù)據(jù)
const tableRef = ref()
const tableData = ref<TableItem[]>([
  { id: 1, name: '張三', age: 25, status: '正常' },
  { id: 2, name: '李四', age: 30, status: '禁用' },
  // 更多數(shù)據(jù)...
])
// 禁用判斷方法
const checkSelectable = (row: TableItem) => {
  return row.status !== '禁用'
}

const toggleAll = () => {
  // 獲取當(dāng)前頁(yè)所有可選項(xiàng)
  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)
  })
}

// 存儲(chǔ)選中ID
const selectedIds = ref<number[]>([])
// 監(jiān)聽(tīng)選中變化
const handleSelectionChange = (rows: TableItem[]) => {
  selectedIds.value = rows.map(row => row.id)
}
// 分頁(yè)切換時(shí)恢復(fù)選中
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="狀態(tài)" />
    </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 }} 項(xiàng)</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'
// 數(shù)據(jù)與狀態(tài)定義...
// 此處插入前面章節(jié)的實(shí)現(xiàn)代碼
</script>
<style scoped>
/* 樣式優(yōu)化代碼... */
</style>