使用elementUI中级联选择器遇到的问题TypeError: Cannot read property ‘level‘ of null

男娘i 2022-12-18 15:58 86阅读 0赞

在用elementUI中的Cascader 级联选择器组件时，遇到的bug; TypeError: Cannot read property 'level' of null  ;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

先说我如何操作时出现的该bug : 有一个重置的按钮，可以清空筛选条件，包括年级条件都想清空，点击重置按钮的时候，我把该组件的v-model绑定的值设置成了空数组，就报这个错了；

我使用Cascader 级联选择器组件并加载数据后的样子如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 1][]

该组件在项目中多处使用，所以我又封装了一次，封成了一个组件，其他文件可以单独引用，减少代码冗余，该组件代码如下：

<template>
      <div class="">
        <el-cascader
          collapse-tags
          :key="isResouceShow"
          style="width: 100%"
          v-model="grades"
          :options="gradeData"
          :props="{ multiple: true }"
          clearable
        ></el-cascader>
      </div>
    </template>
    <script> 
    export default {
      data() {
        return {
          grades: [], // 已经选择的年级
          isResouceShow:0 // 绑定key值
        };
      },
      props: {
        gradeData: {// 父组件传递过来的所有选项数据
          type: Array,
          default: [],
        },
      },
      watch: { 
        grades: {
          handler(v1, v2) {  
            let gradeArr = []; // 年级id 
            let gradeNameArr = []; // 年级名字
            if(v1&&v1.length>0){
              v1.forEach((item) => {
                gradeArr.push(item[item.length - 1]);
              }); 
              this.gradeData.forEach(i =>{
                i.children.forEach(j =>{
                  gradeArr.forEach(k=>{
                    if(j.value === k){
                      gradeNameArr.push(j.label);
                    }
                  })
                })
              })
            }else{
              ++this.isResouceShow ;
            } 
              let obj = { gradeArr,gradeNameArr };
              this.$emit("returnGrade", obj); // 将数据传递给父组件
          },
          immediate: true,
          deep: true,
        },
      },
    };
    </script>
    <style lang="less" scoped>
    </style>

说一下代码大体意思：data中的grades 是当前已经选择了的数据项；props 中的gradeData 是从父组件中传递过来的数据，是级联选择器中的数据项；后台需要的数据只是二级中的数据的id,所以我监听了一下grades，选取了我需要的数据，并向数据传递给父组件；当父组件点击重置按钮的时候，我直接执行 this.$refs\['grade'\].grades = \[\] ; 所以就报错了，所以给组件设置了一个 :key="isResouceShow" ，在监听grades时，当数据为空数组时，也改变了一下 isResouceShow 的值，以便组件能重新渲染；这样就不报错了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: /images/20221122/f15ef3dbf8a444e4b47950b8cc19ffe1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 1]: /images/20221122/e8fef394965448b791e592726aa2c183.png