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

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