el-cascader最后一级全选

### 实现 `el-cascader` 组件最后一级全选功能

为了实现在 Element UI 的 `el-cascader` 组件中最后一级选项的全选功能，可以采用自定义渲染的方式处理。具体来说，在最后一级显示时提供一个“全选”的按钮或复选框来选择所有的子项。

#### 自定义渲染函数实现全选逻辑

通过使用 `scoped slot` 和 JavaScript 来增强原生组件的行为：

<template>
  <div>
    <!-- 使用 scoped slot 定制菜单 -->
    <el-cascader
      ref="cascader"
      v-model="selectedOptions"
      :options="options"
      :props="{ multiple: true, expandTrigger: 'click' }"
      @visible-change="handleVisibleChange">
      <template slot-scope="{ node, data }">
        <span>{{ data.label }}</span>
        <!-- 当到达最底层节点时展示全选按钮 -->
        <span v-if="!node.isLeaf && !data.children.some(child => child.loading)">
          <el-checkbox-group v-model="checkedCities" @change="handleCheckAllChange(data)">
            <el-checkbox :label="child.value" v-for="(child, index) in data.children" :key="index">{{ child.label }}</el-checkbox>
            <el-button type="text" size="mini" @click.stop.prevent="toggleSelection(data)">全选</el-button>
          </el-checkbox-group>
        </span>
      </template>
    </el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        // 这里放置你的数据源...
      ],
      checkedCities: []
    };
  },
  methods: {
    handleVisibleChange(visible) {
      if (!visible) this.$refs.cascader.dropDownVisible = false;
    },
    toggleSelection(item) {
      const allChildrenValues = item.children.map((child) => child.value);
      this.checkedCities = [...allChildrenValues];
      
      // 更新 cascader value with the new selection
      let newValue = [];
      function collectPaths(node, path = []) {
        if (item === node || node.children?.some(n => n === item)) {
          newValue.push([...path]);
        }
        if (node.children) {
          node.children.forEach(c => collectPaths(c, [...path, c.value]));
        }
      }

      this.options.forEach(o => collectPaths(o));
      this.selectedOptions = newValue.flat();
    },
    handleCheckAllChange(item){
      console.log('Handle check change', item)
    }
  }
};
</script>

此方法利用了 Vue.js 提供的插槽机制来自定义每一层的内容，并针对特定条件下的叶子节点添加额外的操作控件。当点击“全选”按钮时，会触发相应的方法将当前层级下所有子项目的值加入到已选列表中[^1]。