在Vue 3 和 Element Plus 中，你可以通过在父组件中维护一个控制状态的响应式数据模型，并将其作为 prop 传递给子组件（表格）。父组件中的按钮可以操作这个状态，子组件（表格）可以根据这个状态来更新内部的行状态。
以下是一个简单的例子：
<template>
<div>
<button @click="toggleAllSelection">
{{ allSelected ? '取消选择' : '全选' }}
</button>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
:row-key="getRowKey"
v-model:selection="selectedRows"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<!-- 其他列 -->
</el-table>
</div>
</template>
<script setup>
import { ref } from 'vue';
const tableData = ref([
// 数据列表
]);
const selectedRows = ref([]);
const allSelected = computed(() => selectedRows.value.length === tableData.value.length);
const getRowKey = (row) => row.id; // 假设每行数据都有唯一的 'id' 字段
const toggleAllSelection = () => {
if (allSelected.value) {
selectedRows.value = [];
} else {
selectedRows.value = tableData.value.map(data => data);
}
};
const handleSelectionChange = (selection) => {
selectedRows.value = selection;
};
</script>在这个例子中：
- 我们使用了计算属性
allSelected来判断是否所有行都已被选中。 - 通过
toggleAllSelection方法来切换所有行的选中状态。 - 使用
v-model:selection指令来绑定表格的选中状态。 - 表格的每一行通过
getRowKey方法来指定唯一的 key，这是使用v-model:selection的前提条件。 - 当选中状态发生变化时，
handleSelectionChange方法会更新selectedRows的值。
当你点击按钮时，toggleAllSelection 方法会被触发，它会根据当前的 allSelected 状态来决定是全选还是取消选择。表格内部的行状态会随着 selectedRows 的变化而更新。