vue3中Element-plus table 反选 禁用实战

在 Vue 3 中使用 Element Plus 的 el-table 组件实现反选和禁用某些行的功能，可以通过以下步骤实现：

1. 安装 Element Plus

首先，确保你已经安装了 Element Plus：

npm install element-plus

2. 引入 Element Plus 组件

在你的 Vue 组件中引入 el-table 组件：

<template>
  <el-table
  	ref="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 为 false
	      selectData?.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 实现表格的反选和禁用功能。