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

在Vue3中使用Element Plus的`<el-table>`组件时，`toggleAllSelection`是一个用于控制表格中所有行是否被选中的功能。你可以通过以下方式来使用`toggleAllSelection`：

1. **基本使用**：
在表格组件上添加`v-model`来绑定选中项的数组，然后在需要的地方调用`toggleAllSelection`方法。

   <template>
     <el-table
       :data="tableData"
       v-model="selectedRows"
       @selection-change="handleSelectionChange">
       <el-table-column
         type="selection"
         width="55">
       </el-table-column>
       <!-- 其他列 -->
     </el-table>
     <el-button @click="toggleAllSelection">{{ toggleAllText }}</el-button>
   </template>

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

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

   const selectedRows = ref([]);

   const handleSelectionChange = (selection) => {
     console.log(selection);
   };

   const toggleAllSelection = () => {
     // 选择全部
     if (selectedRows.value.length === tableData.value.length) {
       selectedRows.value = [];
     } else {
       selectedRows.value = [...tableData.value];
     }
   };

   const toggleAllText = selectedRows.value.length === tableData.value.length ? '取消全选' : '全选';
   </script>

2. **方法参数**：
如果你想要更精细地控制全选的行为，比如要根据某些条件来决定是否全选，可以给`toggleAllSelection`方法传入一个参数，该参数是一个函数，返回`true`表示应该选中，返回`false`表示不应该选中。

   const toggleAllSelection = (callback) => {
     if (callback) {
       selectedRows.value = tableData.value.filter(callback);
     } else {
       // 默认全选或全不选
       if (selectedRows.value.length === tableData.value.length) {
         selectedRows.value = [];
       } else {
         selectedRows.value = [...tableData.value];
       }
     }
   };

3. **动态控制**：
如果需要动态控制表格的全选，你可以通过绑定一个变量来控制`toggleAllSelection`的启用状态，或者根据该变量来决定是否需要全选。

   <el-button :disabled="!canToggleAll" @click="toggleAllSelection">{{ toggleAllText }}</el-button>

在使用Element Plus的`<el-table>`组件时，请确保你已经正确安装并引入了Element Plus。