使用element UI级联菜单实现全选取消全选功能 vue

要实现element UI级联菜单的全选/取消全选功能，可以通过以下步骤实现：

1. 在级联菜单的第一个级别中添加一个全选按钮，用于全选/取消全选所有选项。

2. 在每个级别的选项中添加一个复选框，用于选择/取消选择当前选项。

3. 在全选按钮的点击事件中，遍历所有选项，将其选中状态设置为全选按钮的选中状态。

4. 在每个选项的点击事件中，更新选中状态，并根据当前级别的其他选项状态更新全选按钮的状态。

下面是一个示例代码：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="props"
    @change="handleChange"
  >
    <template #prefix>
      <el-checkbox
        v-model="allChecked"
        @change="handleAllCheckedChange"
      >
        全选
      </el-checkbox>
    </template>
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'option1',
          label: '选项1',
          children: [
            {
              value: 'option1-1',
              label: '选项1-1',
            },
            {
              value: 'option1-2',
              label: '选项1-2',
            },
          ],
        },
        {
          value: 'option2',
          label: '选项2',
          children: [
            {
              value: 'option2-1',
              label: '选项2-1',
            },
            {
              value: 'option2-2',
              label: '选项2-2',
            },
          ],
        },
      ],
      props: {
        value: 'value',
        label: 'label',
        children: 'children',
      },
      selectedOptions: [],
      allChecked: false,
    };
  },
  methods: {
    handleChange(value) {
      this.selectedOptions = value;
    },
    handleAllCheckedChange(checked) {
      this.allChecked = checked;
      this.options.forEach((option) => {
        option.checked = checked;
        if (option.children) {
          this.checkChildren(option.children, checked);
        }
      });
    },
    handleOptionCheckedChange(option) {
      option.checked = !option.checked;
      this.checkParent(option);
      if (option.children) {
        this.checkChildren(option.children, option.checked);
      }
    },
    checkChildren(children, checked) {
      children.forEach((child) => {
        child.checked = checked;
        if (child.children) {
          this.checkChildren(child.children, checked);
        }
      });
    },
    checkParent(option) {
      let parent = option.parent;
      while (parent) {
        let allChecked = true;
        parent.children.forEach((child) => {
          if (!child.checked) {
            allChecked = false;
          }
        });
        parent.checked = allChecked;
        parent = parent.parent;
      }
    },
  },
  created() {
    this.options.forEach((option) => {
      option.checked = false;
      if (option.children) {
        this.setParent(option.children, option);
      }
    });
  },
};
</script>

在这个示例中，我们在级联菜单的第一个级别中添加了一个全选复选框，并使用`@change`事件处理函数`handleAllCheckedChange`来处理全选/取消全选事件。在每个选项中添加了一个复选框，并使用`@change`事件处理函数`handleOptionCheckedChange`来处理选项选择/取消选择事件。在全选/取消全选事件中，我们遍历所有选项，并将其选中状态设置为全选按钮的选中状态。在选项选择/取消选择事件中，我们更新选中状态，并根据当前级别的其他选项状态更新全选按钮的状态。