element 级联选择器懒加载回显

element 级联选择器懒加载

问题描述：

最近使用element ui 做了二级级联选择框，点击编辑，需将选择的之前选择的数据，回显到cascader这个组件里时，怎么都显示不出来，如上图所示。
最后发现问题出现二级选择框的动态加载上，即点击一级选择框，二级选择框才加载。新增数据的时候，级联选择器保存的数据格式为[['value','value'],['value','value']]。点编辑按钮的时候只加载一级选择框，因此无法显示。

实现思路：

1. 首先理解懒加载的原理，懒加载后调用resolve将二级选择框数据加载到页面，实质上是将二级选择框数据添加到一级选择框的children属性上，node数据结构如下：
   
2. 在编辑的时候加载一级选择框，手动把二级选择框的数据放在一级选择框的children属性上
3. 此时，再给[['value','value'],['value','value']]默认值，即可实现，效果图如下：
   

代码实现

<template>
    <el-cascader :options="sysList" :props="props" clearable 
                 v-model="addObj.sysMetricMappings" />
</template>

<script>
export default {
    data() {
        return {
            sysList: [], //一级选择框的数据
            props: {
                multiple: true, 
                lazy: true,  
                lazyLoad: this.lazyLoad  
            }
        };
    },
    methods: {
    	//遍历一级选择框，把二级选择框的数据放在一级的children属性上
        async loadOptions(sysLib) {
            let array = [];
            for (let i = 0; i < sysLib.length; i++) {
                if (sysLib.length > 0) {
                    let res = await this.getLibList(sysLib[i].value);
                    sysLib[i].children = res;
                }
                array.push(sysLib[i]);
            }
            this.sysList = array;
        },
        async lazyLoad(node, resolve) {
            let libList = [];
            if (node.level == 1) {
                libList = await this.getLibList(node.data.sysdataCode);
            } else {
                //node.leaf=true表示当前节点没有子节点
                node.leaf = node.level >= 1;
            }
            resolve(libList);
        },
        async doAdd(item) {
            if (item) {
                this.addObj = {
                    code: item.code,
                    memo: item.memo,
                    id: item.id,
                    name: item.name,
                    timetype: item.timetype,
                    type: item.type,
                    sysMetricMappings: [['100DPS','1001'],['100DPS','1002']]
                };
                await this.loadOptions(this.sysList);
            } else {
                this.addObj = {};
            }
            this.showAdd = true;
        },
};
</script>