element-ui el-cascader 懒加载 多选 回显

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

#### 懒加载功能配置

为了使 `el-cascader` 支持懒加载，需设置属性 `options` 为空数组，并通过异步请求获取子节点数据。当用户展开某个节点时触发回调函数来加载该节点下的选项。

const loadOptions = async (node, resolve) => {
    const { value } = node;
    let result;

    try {
        // 假设这里调用了后端API并返回了响应结果
        result = await fetchChildNodes(value);
        
        // 将获取到的数据传递给resolve方法完成渲染
        resolve(result.map(item => ({
            value: item.id,
            label: item.name,
            leaf: !item.hasChildren
        })));
    } catch(error){
        console.error('Failed to load options:', error);
        resolve([]);
    }
};

此部分逻辑应放在组件内部定义的方法里[^1]。

#### 多选模式下保存已选择项

对于支持多选的情况(`multiple=true`)，可以通过监听输入框变化事件更新本地状态变量存储当前所选值：

<template>
  <!-- ... -->
  <el-cascader
      v-model="selectedValues"
      multiple
      :props="{ lazyLoad: true, checkStrictly: false}"
      @change="handleChange">
  </el-cascader>
</template>

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

let selectedValues = ref([]); 

function handleChange(values){
    // 更新selectedValues的状态
}
</script>

此处需要注意的是，在多选场景中，如果希望父级节点被勾选时不自动全选其所有子节点，则可以将 `checkStrictly` 设置为 `true`[^2]。

#### 编辑状态下恢复初始选择

为了让编辑页面能够正确展示之前已经做出的选择，可以在初始化阶段根据已有记录填充 `v-model` 对应的绑定字段。假设服务器端提供了完整的路径信息作为参数传入前端应用：

// 获取详情接口成功后的处理逻辑
async function getDetail(id:string):Promise<void>{
     const res=await api.get(`/api/detail/${id}`);
     
     // 如果是单选则直接赋值；如果是多选则遍历每一条记录分别push进去
     form.value.cascadeValue=res.data.singleSelect ? [res.data.path.split(',')] :
         res.data.multiPaths.map(path=>path.split(','));

     // 渲染视图...
}

onMounted(() => {
    if(route.params.id){ // 判断是否存在ID表示处于编辑态
          getDetail(String(route.params.id));
    }
});

上述代码片段展示了如何基于不同情况（单选或多选），利用逗号分隔字符串形式的路径构建起始值列表[^3]。