el-cascader级联选择器递归遍历获取最后一层以及倒数第二层，以及解决最后一层展开没有数据的问题

因项目需要,用到了element-ui组件库的el-cascader级联选择器组件,一开始知道后端返给的数据是啥样的,所以直接用了数组的forEach方法去遍历获取级联选择器的最后一层,后来因为偶然报错了,发现后端给的级联选择器数据多了一层,以下的方案就是为了写一个通用的遍历方法,这样不管后端返给的数据有几层都通用了。

        <el-cascader
          v-if="!dataForm.id"
          ref="nodeName"
          style="width: 100%"
          placeholder="请选择部件"
          v-model="dataForm.partName"
          :options="nodeNameOptions"
          :props="{
            value: 'partKey',
            label: 'partName'
          }"
          clearable
          @change="handleChange"
          :show-all-levels="false"
        ></el-cascader>

上面是我项目中用到的组件代码

    // 级联选择器选项发生变化时触发的事件
    handleChange(val) {
      this.dataForm.partKey = val[val.length - 1];// val[val.length - 1]是最后一层的value值
      if (val.length > 0) {
        this.recursionChildren(this.nodeNameOptions, val);
      }
    },
    // 递归遍历cascader级联选择器
    recursionChildren(arr, value) {
      arr.forEach(item => {
        let temp = { ...item };
        if (temp.children && temp.children.length > 0) {
          this.recursionChildren(temp.children, value);
        } else {
          if (value[value.length - 1] == temp.partKey) {
            this.checkedPartName = temp.partName;
          }
        }
      });
    },

如果你需要根据最后一层获取它的父级的label和value,就用下面的方法:

// 获取当前级联选择器选中节点的对象属性
let obj = this.$refs["nodeName"].getCheckedNodes()[0];// nodeName就是级联选择器代码中的ref
this.checkedOnePartKey = obj.path[obj.path.length - 2];// 父级的value值
this.checkedOnePartName = obj.pathLabels[obj.pathLabels.length - 2];// 父级的label值

话说上面这三行代码不仅可以找到父级,还可以往上找。

还有经常遇到的一个问题，就是明明级联选择器数据只有两层，但是你点了以后发现打开了三层，但是最后一层没有数据，虽然不影响使用，但是很不美观，使用下面这个递归遍历方法就可以解决掉这个问题。

// 对返回的级联选择器数据进行处理,避免出现级联选择器最后一级菜单展开为空
    formatData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined;
        } else {
          this.formatData(data[i].children);
        }
      }
      return data;
    },