a-cascader如何设置默认值?ant级联选择器用法。

问题描述:

  1. 需要在表单里使用级联选择器,级联选择器绑定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"]
接下来就简单了。

代码:

  1. 使用级联选择器
<a-cascader :options="departments"
         v-model="selectDep"
		:fieldNames="fieldNames"
        change-on-select
        placeholder="请选择部门"/>
  1. 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)
                        }
                    }
                }
            },

欧耶!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值