在vue3中使用element plus 中的table组件中的toggleAllSelection和toggleRowSelection如何使用

在Vue 3中使用Element Plus的`<el-table>`组件，`toggleAllSelection` 和 `toggleRowSelection` 是用于处理表格行选择的方法。

1. `toggleAllSelection`：这是一个方法，用于切换表格所有行的选择状态。当调用这个方法时，如果表格中所有行都是选中状态，那么调用后所有行将会变为未选中状态，反之亦然。

2. `toggleRowSelection`：这是一个方法，用于切换指定行的选择状态。通过传递一个参数（通常是行数据对象或行索引），可以控制特定行的选中或取消选中。

以下是使用这些方法的基本示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

const tableData = ref([
  // 表格数据
]);

// 处理选择变更的事件
const handleSelectionChange = (selection) => {
  console.log('Current selection:', selection);
};

// 调用 toggleAllSelection 方法
const toggleAllSelection = () => {
  const tableRef = ref(null);
  const allSelected = tableRef.value.toggleAllSelection();
  console.log('Are all rows selected?', allSelected);
};

// 调用 toggleRowSelection 方法
const toggleRowSelection = (rowIndex) => {
  const tableRef = ref(null);
  const row = tableData.value[rowIndex];
  tableRef.value.toggleRowSelection(row);
};
</script>

在上述示例中，我们首先定义了一个`<el-table>`组件，并使用`:data`属性绑定表格数据`tableData`。我们还添加了一个`type="selection"`的`<el-table-column>`来渲染选择框。通过监听`selection-change`事件，我们可以知道当表格的选择状态发生变化时的事件处理函数`handleSelectionChange`。

通过给`el-table`设置一个模板引用`tableRef`，我们可以在组件内部或外部调用`toggleAllSelection`和`toggleRowSelection`方法。