Ant Design Vue Pro antdv select 选择器回填数据后不能更改

使用场景是从父级分类列表点击进入子级分类列表,通过URL传递父级id,在子列表的查询筛选器中自动选中该父级分类,代码和效果如下:

浏览器URL:

 读取浏览器参数pid,赋值到选择器

 赋值代码类似:

if(this.$route.query.pid) {
      this.queryParam.pool_id = parseInt(this.$route.query.pid)
}

此时数据回填看起来是OK的,能选中,但是手动切换其他选项时无法切换,点不动。。

网上有一种解决方案就是,在变量声明的时候要初始化这个key值,如下

return {
      //...
      queryParam: {pool_id:null},
      //...
}

但是但是,在使用多选框的时候,碰到一样的问题,使用这个方案发现行不通。

经过一番摸索,发现个解决方案同时试用单选和多选,完美!!!代码:

//多选框
let data = {pool_id:[1, 3, 5]}
this.apiParams = Object.assign({}, data)
//单选框
this.queryParam = Object.assign({}, this.queryParam, {pool_id:parseInt(this.$route.query.pid)})

enjoy!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值