Element Plus - Cascader 观察记录（基本使用、动态加载、动态加载下的异常环境）

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([]); 时：第一次点击 【一级选项】 时，就会出现新的侧边内容块（赞数数据）
```