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>