问题描述:
- 需要在表单里使用级联选择器,级联选择器绑定model,可以看到编辑信息,解决之前如下图:

解决之后:

看官网解读:ant级联选择器设置默认值
解决思路:只要将:options里,默认选中的id装进数组一个自定义数组(selectDep),用v-mode绑定其就好了,但是!!这个数组里面的id排序有规则的,如果有父级必须将所有的父级的id依次顺序排列!不是将这个子级的id放进去就完事了。
例如:
options: [
{
value: '1',
label: '李四',
children: [
{
value: '2',
label: '张三',
children: [
value: '3',
label: '王五',
code: 752100,
],
}],
}]
如果你的默认值是王五,那么绑定值就得这样写v-mode=["1","2","3"]而不是v-mode=["3"]
接下来就简单了。
代码:
- 使用级联选择器
<a-cascader :options="departments"
v-model="selectDep"
:fieldNames="fieldNames"
change-on-select
placeholder="请选择部门"/>
- js代码
departments: [], //源数据
selectDep:[], //默认选中数据,由id组成的数组
fieldNames:{ //自定义 options 中 label name children 的字段
label: 'name',
value: 'id',
children: 'children'
},
3.点击编辑是的方法:这里很重要!!!
请忽略我的方法名handleEdit()
handleEdit(key){
this.selectDep=(this.getParentId(this.departments, key.department.id))//这里拿到其id下所有父级id,但是排序是反过来的
this.selectDep.reverse()//顺序颠倒
},
//通过当前id获取所有ParentId
getParentId(list,id) {
for (let i in list) {
if(list[i].id==id){//递归条件
return [list[i].id]
}
if(list[i].children){
let node=this.getParentId(list[i].children,id);
if(node!==undefined){
return node.concat(list[i].id)
}
}
}
},
欧耶!
版权声明:本文为weixin_45049852原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。