Element-UI 级联选择器动态回显数据

背景

解决级联选择器动态获取数据后选中数据时的回显bug

组件使用

<el-cascader
    style="width: 300px"
    :props="cascaderPros"
    ref="cascaderModel"
    @change="cascaderChange"
    v-if="isShowCascader"
></el-cascader>

定义动态方法

lazyLoad(node, resolve) {
  // console.log("node", node);


  setTimeout(() => {
    if (node.level == 0) {
      departList({}).then((res) => {
        let data = [];
        if (res.code == 1) {
          data = res.data.list.map((value, i) => {
            return {
              value: value.id,
              label: value.name,
            };
          });
          resolve(data);
        } else {
          self.$message.error("获取一级部门数据异常");
        }
      });
    } else if (node.level == 1) {
      let params = {
        department_id: node.data.value,
      };
      deplistSecondList(params).then((res) => {
        // console.log("二级部门列表", res);
        let child = [];
        if (res.code == 1) {
          node.data.children = [];
          child = res.data.list.map((value, i) => {
            return {
              value: value.id,
              label: value.name,
              leaf: true,
            };
          });
          if (child.length == 0) {
            self.$message("该部门下没有二级部门");
            self.$refs.cascaderModel.$refs.panel.activePath = [];
            self.$refs.cascaderModel.$refs.panel.syncActivePath();
          }
          resolve(child);
        } else {
          self.$message.error("获取二级部门数据异常");
        }
      });
    } else if (node.level == 2) {
      resolve([]);
    }
  }, 500);
},

解决方式

弹框返回时需要执行下面三行，否则再次打开还会出现上次的选择

this.$refs.cascaderModel.$refs.panel.checkedValue = []; //也可以是指定的值，默认返回值是数组，也可以返回单个值
this.$refs.cascaderModel.$refs.panel.activePath = [];
this.$refs.cascaderModel.$refs.panel.syncActivePath();