1、场景描述

这里展示的是已经获得后台传回来的需要回显数据，在级联选择器中进行回显，并且能保持稳定回显

2、解决办法

2.1、在el-cascader标签中加入

: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”,

},

}
},