Cascader 观察记录
1、基本使用
vue
<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、动态加载
vue
<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、动态加载（异常环境）
vue
<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([]); 时：第一次点击 【一级选项】 时，就会出现新的侧边内容块（赞数数据）
```