在 Vue 3 中使用 Element Plus 的 el-table 组件实现反选和禁用某些行的功能，可以通过以下步骤实现：
1. 安装 Element Plus
首先，确保你已经安装了 Element Plus：
npm install element-plus
2. 引入 Element Plus 组件
在你的 Vue 组件中引入 el-table 组件：
<template><el-tableref="multipleTableRef":data="tableData"style="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" :selectable="selectable"></el-table-column><el-table-column prop="name" label="Name" width="180"></el-table-column><el-table-column prop="age" label="Age" width="180"></el-table-column><el-table-column prop="address" label="Address"></el-table-column></el-table>
</template><script setup>
import { ref, onMounted } from 'vue'const multipleTableRef = ref()
const selectedRows = ref([])
// 模拟需要选中的数据
const selectData = [{ id: 1, name: 'John', age: 25, address: 'New York', disabled: false },
]
// 表格的渲染数据
const tableData = ref([{ id: 1, name: 'John', age: 25, address: 'New York', disabled: false },{ id: 2, name: 'Jane', age: 22, address: 'London', disabled: true },{ id: 3, name: 'Tom', age: 30, address: 'Sydney', disabled: false },
])// 模拟请求数据
const getDataApi = async () => {const { code, data }= await axios.get()if (code === 200) {// 如果接口请求数据没有disabled属性，则根据 selectData 的数据进行加入属性，用于是否禁用data?.forEach(c => {c.disabled= false // 先初始化所有 checked 为 falseselectData?.forEach(v => {if (c.serviceId === v.serviceId) {c.disabled= true}})})tableData.value = data || []}
}const handleSelectionChange = (selection) => {selectedRows.value = selection
}// 禁用选中框
const selectable = (row) => {return !row.disabled; // 禁用 disabled 为 true 的行，如果该row没有disabled属性，则在数据拿到的时候根据你的需求情况加入disabled属性
}// 默认反选数据
const defaultSelect = () => {// selectData数据为需要选中的数据for (let i = 0; i < selectData?.length; i++) {multipleTableRef.value?.toggleRowSelection(tableData.value?.find(item => {return selectData[i].id === item.id}) || {},true)}
}onMounted(async () => {await getDataApi()await defaultSelect()
})</script>
3. 代码解析
multipleTableRef: 表格ref实例，用于操控整个table组件，包括反选等等。tableData: 表格的数据源，其中disabled字段用于控制某一行是否可以被选中。selectedRows: 用于存储当前选中的行。selectData: 模拟需要选中的数据。getDataApi: 模拟api请求数数据。handleSelectionChange: 当用户选择或取消选择某一行时触发，更新selectedRows。selectable: 用于控制某一行是否可以被选中。如果row.disabled为true，则该行不可选中。defaultSelect: 反选功能，遍历所有行，切换每一行的选中状态（跳过被禁用的行）。
4. 运行效果
- 表格中
disabled为true的行将无法被选中。 - 点击“反选”按钮时，所有可被选中的行将切换选中状态。
5. 注意事项
- 反选功能只会切换可被选中的行的状态，禁用的行不会受到影响。
- 你可以根据实际需求调整
selectable函数的逻辑，以实现更复杂的禁用规则。 - 还可以加入分页等操作，根据需求来实现。
通过以上步骤，你可以在 Vue 3 中使用 Element Plus 实现表格的反选和禁用功能。