el-cascader 添加全选，设置全选，半选，不选

在Element UI的`el-cascader`（级联选择器）组件中，添加全选、半选和不选功能通常涉及到动态管理每个级别的选中状态。`el-cascader`本身并不直接支持这样的自定义模式，但是你可以通过监听其提供的`@change`或`@node-change`事件，结合数据结构的变化来控制选中状态。

首先，你需要维护一个完整的树状数据结构，其中包含选中状态信息。例如，每个节点可以有一个`checked`属性来标记是否被选中。

<template>
  <el-cascader
    :options="options"
    @node-expand="handleNodeExpand"
    @node-collapse="handleNodeCollapse"
    v-model="selectedValues"
  ></el-cascader>
  <button @click="selectAll">全选</button>
  <button @click="selectHalf">半选</button>
  <button @click="clearSelections">清空</button>
</template>

<script>
export default {
  data() {
    return {
      options: ...,
      selectedValues: [],
    };
  },
  methods: {
    handleNodeExpand(node) {
      node.checked = !node.checked; // 当前节点切换状态
      this.updateChildrenState(node); // 更新子节点状态
    },
    handleNodeCollapse(node) {
      node.checked = false;
      this.updateChildrenState(node);
    },
    selectAll() {
      this.options.forEach(node => {
        node.checked = true;
      });
      this.selectedValues = Array.from(this.options).map(node => node.value);
    },
    selectHalf() {
      const halfCheckedNodes = this.options.filter(node => node.children && node.children.length > 0 && node.children.some(child => child.checked));
      halfCheckedNodes.forEach(node => {
        node.checked = !node.children.every(child => child.checked);
      });
      this.updateChildrenState(halfCheckedNodes);
    },
    clearSelections() {
      this.options.forEach(node => {
        node.checked = false;
      });
      this.selectedValues = [];
    },
    updateChildrenState(node) {
      if (!node.children) return;
      node.children.forEach(child => {
        child.checked = node.checked;
        this.updateChildrenState(child);
      });
    },
  },
};
</script>

这个例子展示了如何监听节点展开和折叠事件，以及自定义全选、半选和清空操作。`selectAll`函数会使所有节点选中，`selectHalf`会让每个有子节点的节点保持一半子节点选中，而`clearSelections`则清除所有选中项。