vue3element如何通过表格外的按钮来控制表格内部的所有状态全选全不选

在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 的变化而更新。