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

使用Element UI级联菜单实现全选取消全选功能可以通过以下步骤实现：

1. 在级联菜单的第一级菜单上添加全选和取消全选的选项；
2. 点击全选时，遍历所有的子节点，并将其选中；
3. 点击取消全选时，遍历所有的子节点，并将其取消选中。

代码示例：

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :props="props"
  @change="handleChange"
  @expand-change="handleExpandChange"
  :show-all-levels="false"
>
  <!-- 全选和取消全选选项 -->
  <template v-slot:default="{ node, data }">
    <span v-if="data.length > 0">
      <el-checkbox v-model="node.checked" @change="handleCheckAll(node, data)">
        {{ node.label }}
      </el-checkbox>
    </span>
    <span v-else>{{ node.label }}</span>
  </template>
</el-cascader>

data() {
  return {
    options: [
      {
        value: 'zhinan',
        label: '指南',
        children: [
          {
            value: 'shejiyuanze',
            label: '设计原则',
            children: [
              { value: 'yizhi', label: '一致' },
              { value: 'fankui', label: '反馈' },
              { value: 'xiaolv', label: '效率' },
              { value: 'kekong', label: '可控' }
            ]
          }
        ]
      }
    ],
    props: {
      value: 'value',
      label: 'label',
      children: 'children'
    },
    selectedOptions: []
  };
},
methods: {
  handleCheckAll(node, data) {
    if (node.checked) {
      data.forEach(item => {
        item.checked = true;
      });
    } else {
      data.forEach(item => {
        item.checked = false;
      });
    }
  },
  handleChange(value) {
    console.log(value);
  },
  handleExpandChange(value) {
    console.log(value);
  }
}

其中，`handleCheckAll`方法是用来实现全选和取消全选的功能，`handleChange`和`handleExpandChange`方法则是用来处理级联菜单的 change 和 expand-change 事件。在模板中，使用了`v-slot:default`将全选和取消全选选项插入到第一级菜单中，并使用了`v-model="node.checked"`来控制每个节点的选中状态。