element UI 级联选择器默认选中的值

Question

需要实现一个类似于省市级联的组件，取值为最后一级的code
但是在实现的时候发现，elementui组件绑定的值类型为array
目前创建的时候，并没有什么问题，我取值数组最后一个index就可以了

但是在修改的时候，无法实现默认选择
求问如何不通过后端存贮array来实现级联选择的默认选

Answer 1

element UI的Cascader级联选择器组件在编辑时，
它需要一个数组值，而一般我们api给的数据是一个值。
所以两个解决方法：

1. 说服后台，让后台给arr。
2. 自己根据给定的值获取级联关系arr。

刚好这两天解决了这个问题。
写了一个方法如下：

function 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].id);
            
            if (childrenData[j].id == key) {

                // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
                returnArr = arr.slice(0, depthN+1); //将目前匹配的数组，截断并保存到结果数组，
                break

            } else {

                if (childrenData[j].children) {

                    depth ++;
                    childrenEach(childrenData[j].children, depth);

                }
            }

        }
        return returnArr;
    }
    return childrenEach(treeData, depth);
}
// 结果：
// console.log(getTreeDeepArr(1, treeData)); // [1]
// console.log(getTreeDeepArr(3, treeData)); // [1, 3]
// console.log(getTreeDeepArr(5, treeData)); // [1, 4, 5]
var treeData = [{
    id: 1,
    children: [{
        id: 3
    },{
        id: 4,
        children: [{
            id: 5,
            children: [{
                id: 6
            },
            {
                id: 8
            }]
        }]
    },{
        id: 7
    },{
        id: 12,
        children: [{
            id: 13
        }]
    }]
},{
    id: 2,
    children: [{
        id: 9,
        children: [{
            id: 10
        }]
    }]
},{
    id: 11
}];

// 结构：
// 
//   1 --- 3
//     --- 4 --- 5 --- 6
//                 --- 8
//     --- 7
//   2 --- 9 --- 10
//   11