elementui中el-cascader级联选择器回显解决办法（稳定有效）

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",

      },

       }
    },