使用场景是从父级分类列表点击进入子级分类列表,通过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!