el-cascader多选+懒加载+数据回显

背景：
记录el-cascader多选+懒加载+数据回显的实际案例。
注意：
1.回显数据的时候除了给v-model绑定的属性赋值以外，还要提供一个包含需要渲染的级联数据的options模板。
2.resolve(nodes) 返回的nodes为下一级要渲染的list列表数据，如果是回显已提供了options渲染模板但是不完整，则需要在后面懒加载的时候将返回的list数据和已存在的节点数据做对比，仅保留options中不存在的节点数据再把过滤后的节点resolve(nodes)。

<template>
    <div>
        <!--template模板中引用-->
        <el-cascader style="width: 100%" :props="cascaderProps" :options="formData.options" v-model="formData.vpc_info" @change="cascaderChange" v-if="cascaderVisible">
    </div>
</template>

<script>
    export default {
        data() {
            formData: {
                //回显数据的模板
                options: [{
                    "children": [{
                        "children": [{
                            "label": "infra-test-01",
                            "value": "infra-test-01"
                        }],
                        "label": "usne",
                        "value": "usne"
                    }],
                    "label": "AZURE-CLOUD",
                    "value": "3"
                }],
                //需要回显的三级数据
                vpc_info: [
                    ['3', 'usne', 'infra-test-01']
                ],
            },
            cascaderVisible: true,
            cascaderProps: {
                lazy: true,
                multiple: true,
                lazyLoad: (node, resolve) => {
                    const {
                        level
                    } = node;
                    console.log('lazyLoadnode', node)
                    if(level === 2) { //点击城市level=2加载vpc列表
                        this.getCloudInfo(node, resolve, node.parent.value, node.value)
                    } else if(level === 1) { //点击云服务level=1加载城市列表
                        this.getCloudInfo(node, resolve, node.value)
                    } else { //初始化level=0加载云服务列表
                        this.getCloudInfo(node, resolve)
                    }
                }
            },
        },
        watch: {
            // 监听环境变化
            'formData.cd_work_env': {
                handler(cd_work_env, value) {
                    console.log('cd_work_env改变---', cd_work_env)
                    if(cd_work_env && cd_work_env !== value) {
                        //切换环境重置云服务列表 通过v-if触发三级联动自动加载
                        this.formData.vpc_info = []
                        this.cascaderVisible = false
                        this.$nextTick(() => {
                            this.cascaderVisible = true
                        })
                    }
                }
            },
        },
        methods: {
            // 懒加载获取三级联动数据
            getCloudInfo(node, resolve, cloudId = '', areaId = '') {
                if(!this.formData.cd_work_env) {
                    return false;
                }
                _fetch({
                    url: '/deploy-resource-management/mixCloud/getCloudInfoBySytemId',
                    type: 'post',
                    data: {
                        system_id: this.formData.cd_work_system,
                        env: this.formData.cd_work_env,
                        cloud_type: cloudId,
                        area: areaId,
                    }
                }).then(res => {
                    if(res.data.code === 200) {
                        //将当前节点已有的子节点和重新请求的node节点对比，如已存在则移除该节点再resolve
                        if(res.data.body.type && res.data.body.type.length) {
                            let nodes = res.data.body.type.map(item => {
                                return { ...item,
                                    leaf: node.level >= 2
                                }
                            })
                            if(node.hasChildren && node.children.length) {
                                let list = []
                                node.children.forEach(item => {
                                    let flag = true
                                    nodes.forEach(subItem => {
                                        if(item.value === subItem.value) {
                                            flag = false
                                        }
                                    })
                                    if(flag) {
                                        list.push(subItem)
                                    }
                                })
                                resolve(list);
                            } else {
                                resolve(nodes);
                            }
                        } else {
                            resolve([]);
                        }
                    } else {
                        _message(this.$t("localization.common.error"), res.data.message, "error", this)
                    }
                }).catch(err => {
                    console.log(err)
                });
            },
            cascaderChange(value) {
                console.log(value)
            },
        }
    }
</script>