关于 element-ui el-cascader 数据回显问题的解决方案

通常情况下，我们在使用 el-cascader控件，往数据库保存的都是最后一级的数据，那如果再次编辑此条数据时，直接给el-cascader 传入最后一级的数据，它是不会自动勾选的。

简略的数据结构

[{
    value: 'zhinan',
    label: '指南',
    children: [{
        value: 'shejiyuanze',
        label: '设计原则',
        children: [{
          value: 'yizhi',
          label: '一致'
        }, {
          value: 'fankui',
          label: '反馈'
        }]
    }]
}]    

如下图，如果我直接给el-cascader赋值为['fankui'],它是不会直接勾选上的，因为el-cascader需要的格式不是这样的

要想知道el-cascader需要的格式是什么样的，可以给el-cascader绑定一个chang事件，勾选【指南/设计原则/一致】，打印一下

<!-- multiple 控制是否多选 -->
<el-cascader 其他的属性省略 v-model="value" :props="{ multiple: true}" @change="handCascaderChange"></el-cascader>

handCascaderChange(val){
  console.log(val) 
  // 单选（multiple=false） 时， val = ["zhinan","shejiyuanze","yizhi"]
  // 多选（multiple=true） 时， val = [["zhinan","shejiyuanze","yizhi"]]
},

由此我们可以的得出结论：el-cascader需要的参数是整条路径，[第一级，第二级，第三级，***]

如此，我们需要一个工具函数，根据value找出整条路径,然后再给控件赋值，这样组件就可以将相关数据勾选上了

function search(object, value) {
    for (var key in object) {
        if (object[key].value == value) return [object[key].value];
        if(object[key].children && Object.keys(object[key].children).length > 0){
            var temp = search(object[key].children, value);
            if (temp) return [object[key].value, temp].flat();
        }
    }
}
let options = [{
    value: 'zhinan',
    label: '指南',
    children: [{
        value: 'shejiyuanze',
        label: '设计原则',
        children: [{
          value: 'yizhi',
          label: '一致'
        }, {
          value: 'fankui',
          label: '反馈'
        }]
    }]
}]
let val = search(options,'yizhi') // ["zhinan","shejiyuanze","yizhi"]
// 单选和多选赋值有一点不同
if(multiple){
    this.value = [val]  // this.value：el-cascader v-model 绑定的变量
}else {
    this.value = val
}