VUE3 el-table 默认全选

在Vue 3中，如果想要在`el-table`组件中实现默认全选的功能，你可以使用Element UI提供的`@selection-change`事件监听器。首先，在你的`<template>`部分，添加一个复选框作为全选按钮：

<template>
  <el-table ref="table" :data="items" @selection-change="handleSelectionChange">
    <!-- 表头和其他列... -->
    <el-checkbox v-model="allChecked" @change="toggleAll">全选</el-checkbox>
  </el-table>
</template>

然后，在`<script>`部分定义`allChecked`和`toggleAll`方法：

<script>
import { ElCheckbox } from 'element-ui';

export default {
  components: {
    ElCheckbox,
  },
  data() {
    return {
      items: [], // 这里是你实际的数据源
      allChecked: false, // 初始全选状态
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.allChecked = selection.length === this.items.length;
      // 如果你需要更新数据库或者其他地方的状态，这一步可以做相应的操作
    },
    toggleAll() {
      this.$refs.table.selectAll();
    },
  },
};
</script>

当`allChecked`属性改变时，`handleSelectionChange`方法会被触发，同时`toggleAll`方法用于直接在表格上执行全选操作。