1、场景描述
这里展示的是已经获得后台传回来的需要回显数据,在级联选择器中进行回显,并且能保持稳定回显
2、解决办法
2.1、在el-cascader标签中加入
<!--设置key属性是为了让组件重新渲染,重新赋值value,就可以实现回填功能-->
<!--v-model绑定的值为要回显的数据,格式为['一级菜单value','二级','三级'...]-->
:key="modalKey"
v-model="choose"
2.2、在data中定义
data() { //定义变量和初始值
return{
modalKey: 0,
choose: [],
}
},
2.3、赋值
参考以下代码
methods:{ //创建具体的方法,
getInfo() {
course.getCourseInfoId(this.courseId).then((response) => {
//在courseInfo课程基本信息,包含 一级分类id 和 二级分类id
this.courseInfo = response.data.courseInfoVo;
//下标0为一级菜单value
this.choose[0] = this.courseInfo.subjectParentId;
//下标1为二级菜单value
this.choose[1] = this.courseInfo.subjectId;
this.modalKey++;//改变key值,组件重新渲染,实现回填功能
console.log(this.choose);
});
},
}
总结一下,这一步只要实现给数组赋值并同时改变key值实现重新渲染就行了
数组参考格式:
['1464938102765211650', '1464938104073834498']//['一级菜单value','二级','三级'...]
参考博文:
vue+elementui+el-cascader 动态加载地址组件以及回填功能
elementUI的cascader级联选择控件的默认值(回显)问题
3、顺便记录一下
后台返回数据键值不符合级联选择器默认键值时如何映射
3.1在el-cascader标签中加入
:props="customProps"
3.2定义变量和初始值
data() { //定义变量和初始值
return{
customProps: {
emitPath: false, // 只返回该节点的值
value: "id", // 自定义要映射的键名
label: "title",
children: "children",
},
}
},