Cascader 观察记录
1、基本使用
<template> <div> <el-cascader v-model="value" :options="options" @change="handleChange" /> </div> </template> <script lang="ts"> export default { name: "CascaderTest", }; </script> <script lang="ts" setup> const value = ref([]); const options = ref([ { value: "staff", label: "人员信息", children: [ { value: "staff1", label: "张三", }, { value: "staff2", label: "李四", }, ], }, { value: "task", label: "任务信息", children: [ { value: "task1", label: "任务 1", }, { value: "task2", label: "任务 2", }, ], }, ]); const handleChange = (val) => { console.log(val); }; </script> <style scoped lang="sass"></style>
- 选择 【人员信息 / 张三】 输出结果如下
Proxy(Array) {0: 'staff', 1: 'staff1'}
- 选择 【任务信息 / 任务 1】 输出结果如下
Proxy(Array) {0: 'task', 1: 'task1'}
2、动态加载
<template> <div> <el-cascader :props="props" /> </div> </template> <script lang="ts"> export default { name: "CascaderTest", }; </script> <script lang="ts" setup> const props = { lazy: true, lazyLoad(node, resolve) { const { level } = node; // 第一层，level 为 0 if (level === 0) { console.log("动态加载第一层"); resolve([ { value: "staff", label: "人员信息", leaf: false, }, { value: "task", label: "任务信息", leaf: false, }, ]); } else { console.log("动态加载第二层"); setTimeout(() => { if (node.value === "staff") { console.log("动态加载人员信息"); resolve([ { value: "staff1", label: "人员 1", leaf: true, }, { value: "staff2", label: "人员 2", leaf: true, }, ]); } else if (node.value === "task") { console.log("动态加载任务信息"); resolve([ { value: "task1", label: "任务 1", leaf: true, }, { value: "task2", label: "任务 2", leaf: true, }, ]); } }, 1000); } }, }; const handleChange = (val) => { console.log(val); }; </script> <style scoped lang="sass"></style>
- 打开页面，输出结果如下
动态加载第一层
- 点击 【人员信息】 输出结果如下
动态加载第二层 动态加载人员信息
- 点击 【任务信息】 输出结果如下
动态加载第二层 动态加载任务信息
- 再次点击 【人员信息】 输出结果如下
（无，不会再执行动态加载）
3、动态加载（异常环境）
<template> <div> <el-cascader :props="props" /> </div> </template> <script lang="ts"> export default { name: "CascaderTest", }; </script> <script lang="ts" setup> let time = 1; const props = { lazy: true, lazyLoad(node, resolve) { const { level } = node; // 第一层，level 为 0 if (level === 0) { console.log("动态加载第一层"); resolve([ { value: "staff", label: "人员信息", leaf: false, }, { value: "task", label: "任务信息", leaf: false, }, ]); } else { console.log("动态加载第二层"); setTimeout(() => { if (node.value === "staff") { console.log("动态加载人员信息"); if (time < 3) { console.log("模拟发生异常"); time++; resolve([]); } else { resolve([ { value: "staff1", label: "人员 1", leaf: true, }, { value: "staff2", label: "人员 2", leaf: true, }, ]); } } else if (node.value === "task") { console.log("动态加载任务信息"); resolve([ { value: "task1", label: "任务 1", leaf: true, }, { value: "task2", label: "任务 2", leaf: true, }, ]); } }, 1000); } }, }; const handleChange = (val) => { console.log(val); }; </script> <style scoped lang="sass"></style>
- 打开页面，输出结果如下
动态加载第一层
- 点击 【人员信息】 输出结果如下
动态加载第二层 动态加载人员信息 模拟发生异常
- 再次点击 【人员信息】 输出结果如下
（无，不会再执行动态加载）
4、补充
* 在第一层时 1. 使用 resolve(); 时：点击下拉按钮，出现内容块（加载中） 2. 使用 resolve([]); 时：点击下拉按钮，出现内容块（暂无数据）
* 在第二层时 1. 使用 resolve(); 时：第一次点击 【一级选项】 时，不会出现新的侧边内容块；第二次点击 【一级选项】 时，才会出现新的侧边内容块（暂无数据） 2. 使用 resolve([]); 时：第一次点击 【一级选项】 时，就会出现新的侧边内容块（赞数数据） ```
