elementui多选框全选

Element UI 的多选框组件（el-checkbox-group）提供了全选/取消全选的功能，使得用户能够快速选择或取消所有选项。使用方法如下：

1. 在 HTML 中，创建一个 `el-checkbox-group` 组件，并包含多个 `el-checkbox` 子元素作为可选项目：

<el-checkbox-group v-model="checkboxItems">
  <el-checkbox label="Option 1">Option 1</el-checkbox>
  <el-checkbox label="Option 2">Option 2</el-checkbox>
  <!-- 更多选项... -->
</el-checkbox-group>

`v-model` 绑定了一个数组 `checkboxItems`，用于存储被选中的项。

2. 在 Vue 实例中，管理多选框的状态：

data() {
  return {
    checkboxItems: ['Option 1', 'Option 2'], // 默认选中的项
  };
},
methods: {
  toggleAllSelection() {
    this.checkboxItems = ['Option 1', 'Option 2']; // 执行全选
    // 或者
    this.checkboxItems.length = 0; // 执行取消全选
  },
},

`toggleAllSelection` 方法可以在需要的时候触发全选或取消全选操作。

3. 如果你想提供一个全局的全选按钮或功能，可以通过绑定事件监听器实现：

<template>
  <el-button @click="toggleAllSelection" type="primary">全选/取消全选</el-button>
  <!-- ... -->
</template>

<script>
export default {
  methods: {
    toggleAllSelection() {
      // 略
    },
  },
};
</script>

这样，当点击“全选/取消全选”按钮时，`toggleAllSelection` 方法会被调用，从而改变所有多选框的状态。