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文件。
如此就可以解决回显不出来的问题啦！

将不断更新完善，期待您的批评指正！