vue+element ui中动态实现级联选择器 el-cascader踩过的坑

实现效果图

实现方法

html

备注 ：props 可初始化一些字段； change事件可以获取所需要的value 值
js

获取动态数据并赋值所需要的数组

这样就基本实现了级联选择器，但是坑来了

描述

当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误（如果没有选择就不会报错的）

分析

这个错误的原因是当选择后，再更新内容时，选择器仍会关联原来的数据，导致找不到之前选择的元素。

解决

所以可以采用 重新渲染 的方式解决这个问题。

查看完整代码

html

<el-form-item label="维修项目" size="mini">
		 <el-cascader
		     :key="refreshItem"
		     v-model="form.itemId"
		     :options="catoArr"
		     clearable
		     :props="defaultProps"
		     @change="getCato"
		     :show-all-levels="false"
		   ></el-cascader>
 </el-form-item>

js

 data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        value:"id"
      },
      form: {
        itemId: "",
      },
      catoArr: [ ],
      refreshItem:0,  // 重新渲染级联选择器
    };
methods:{

getRepairItem(val) {
      this.$http
        .post("/callcenter/maintainForm/getMaintainItemList", {
          communityId: this.currentProject.id,
          formType: val
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 100) {
            this.refreshItem++;
            this.catoArr = res.data.result;
          }
        });
    }
}

说明

• 通过clearable 设置输入框可清空， 因为选择器没有显示全部的地方，所以如果作为筛选来讲，可以添加清空属性使得字段值变为空，从而查到全部

• 属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

• 关于elementUI中cascader选中值后，能获取value或者label，但不能同时获value和label，解决方法如下：
  先定义一下组件中的 ref
  

  this.$refs['cascaders'].getCheckedNodes()[0].label  // 即可获取label值
  

跳坑完美结束~

转载：https://blog.csdn.net/qq_39490750/article/details/110392057