el-cascader 懒加载 多选 回显

### Element Plus `el-cascader` 组件懒加载与多选回显实现

#### 懒加载功能介绍
为了优化性能并减少初始页面加载时间，可以采用懒加载方式来处理级联选择器的数据。当用户展开某个节点时才去请求该节点下的子节点数据[^1]。

对于Element Plus中的`el-cascader`组件来说，可以通过设置`lazy=true`以及提供相应的`loadData`函数来开启懒加载模式。每当需要展示下一级菜单之前都会调用此回调函数，并传入当前节点的信息作为参数以便于发起网络请求获取更多详情[^2]。

const loadData = (node, resolve) => {
    // node.level 可用于判断是否为根节点或其他层级
    setTimeout(() => {  // 模拟异步操作
        const nodes = Array.from({ length: Math.floor(Math.random() * 5 + 1) }, (_, i) =>
            ({ value: `${node.value}-${i}`, label: `Item ${node.value}-${i}` })
        );
        
        // 如果不是叶子结点，则继续允许懒加载
        if (!nodes.some(n => n.isLeaf)) {
            nodes.forEach((n) => n.leaf = false);
        }
        
        resolve(nodes);  // 返回给框架渲染新选项
    }, 1000);
};

#### 多选支持及回显机制

为了让`el-cascader`能够支持多项选择并将已有的值正确地反映出来（即“回显”），除了要确保基础配置项如`props.multiple`被启用外，还需要特别注意两点：

- **初始化默认值**：通过v-model绑定变量传递预先选定好的路径数组。

- **自定义过滤逻辑**：由于懒加载特性使得并非所有可能的选择都在一开始就存在DOM树上；因此，在尝试匹配已有选择项时可能会遇到找不到的情况。此时应该手动遍历整个树形结构寻找符合条件的节点，并将其状态设为已选中[^3]。

下面是一个完整的Vue SFC例子展示了上述概念的应用场景：

<template>
  <div id="app">
    <el-cascader v-model="selectedOptions" :options="options" lazy load lazily @expand-change="handleExpandChange"
      :props="{ multiple: true }"></el-cascader>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let selectedOptions = ref([['root', 'child1'], ['root']]);

function handleExpandChange(expandedPaths) {
    expandedPaths.forEach(path => {
        let lastNodeValue = path[path.length - 1];
        console.log(`Expanding path ending with "${lastNodeValue}"`);
        // Here you would make an API call to fetch children of the given parent.
        // For demonstration purposes we'll just log it out instead.
    });
}

// Simulate initial options loading...
setTimeout(() => {
    options.value = [
        { value: "root", label: "Root Node", leaf: false },
        // Add more static or dynamically loaded items here as needed.
    ];
}, 1);

</script>