element級聯地址選擇器使用及沒法回顯bug

項目中遇到的問題，在這裏和你們分享一下同時作個記錄，有須要歡迎隨時溝通！

需求：實現以下圖級聯地址選擇器,要求可根據返回數據進行回顯並能夠修改。

技術棧：vue,element-ui

1.先來介紹下此組件如何使用

首先準備一份json格式的地址，在此爲您呈上：
https://segmentfault.com/a/11...
接下來安裝element巴拉巴拉的我就很少說啦。直接說如何使用

<el-cascader
    v-model='areaInfo'
    placeholder="省/市（可搜索）"
    :options="areaList"
    :props="{ value: 'label' }"
    separator='/' :clearable=true
    filterable @change="changeArea">
</el-cascader>

• 其中areaInfo，表示選中的省市。
• options表明所有的地址選項，也就是剛剛的Json問價。
• props表示自定義的屬性名稱，和你的地址json文件裏的屬性名叫啥有關係。
• separator表示用啥分隔省市，由於想實現可搜索，因此自定義了‘/’,默認是‘ / ’，先後不輸入空格用戶搜不出來。
• clearable：是否可清除
• filterable：是否可搜索

吶，使用步驟就這麼多。我發現了一個問題，就是地址回顯不出來。也就是沒法展現默認地址，接下來我來講說我是如何解決的。

解決不回顯問題

定義了一個方法：

getTreeDeepArr(key, treeData) {
    let arr = []; // 在遞歸時操做的數組
    let returnArr = []; // 存放結果的數組
    let depth = 0; // 定義全局層級
    // 定義遞歸函數
    function childrenEach(childrenData, depthN) {
        for (var j = 0; j < childrenData.length; j++) {
            depth = depthN; // 將執行的層級賦值 到 全局層級
            arr[depthN] = (childrenData[j].label);
            if (childrenData[j].label == key) {
                returnArr = arr.slice(0, depthN+1); //將目前匹配的數組，截斷並保存到結果數組，
                break
            } else {
                if (childrenData[j].children) {
                    depth ++;
                    childrenEach(childrenData[j].children, depth);
                }
            }

        }
        return returnArr;
    }
    return childrenEach(treeData, depth);
},

在獲取到地址時，不直接賦值，而是調用這個方法：

其中第一個參數 arg[0]爲我要展現的地址，arealist爲地址的json文件。
如此就能夠解決回顯不出來的問題啦！

將不斷更新完善，期待您的批評指正！