通常情况下,我们在使用 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
}