vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题

it资料抠wx:1113467806,免费赠送

1. 出现问题bug: el-cascader控件 最后一级出现空白 暂无数据

2. 问题原因分析

经过调试分析出现空级联原因是：由于数据是从后台传递过来的，当后端的哥们使用递归算出菜单，然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组，这样就会造成，空级联 的bug存在。

3. 解决办法: 使用递归的方式，将最底层中的 children设为undefined

3.1 html 代码

<el-cascader
  :show-all-levels="false"
  v-model="subCatValue"
  :options="allSubCatList"
  :props="optionProps"
  @change="handleSubCat"
></el-cascader>

3.2 JS处理 代码

• 主要是 getTreeData 方法递归判断
• el-cascader 的 optionProps 属性可以根据后端的返回值映射为识别的对应值

export default {
  data() {
    return {
      optionProps: {
        value: 'id',
        label: 'className',
        children: 'subcat'
      },// 格式化工单信息
      allSubCatList:[], // 工单分类列表
      subCatValue:[], // 工单分类值
      },
    };
  },
  methods: {
  	// 获取列表
    getAllSubCatList(){
      this.$axios.get(this.$httpServer.getAllSubCatList,{}).then((res)=>{
        console.log(res);
        if(res.status == "200"){
          this.allSubCatList = this.getTreeData(res.data.data);
        }
      })
    },
    // 递归判断列表，把最后的children设为undefined
    getTreeData(data){
      for(var i=0;i<data.length;i++){
        if(data[i].subcat.length<1){
          // children若为空数组，则将children设为undefined
          data[i].subcat=undefined;
        }else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].subcat);
        }
      }
      return data;
    }
  },
};
</script>

4. 解决后效果

5. 补充 通过id选择对应的名字(element-ui中cascader同时获取label和value值)

names =[ ] data = 递归树 (allSubCatList:[])   users 选中的id数组 (subCatValue:[])
diguiEvent(names,data,users){
      var l = data.length;
      for (var i = 0; i < l; i++) {
        for(var j= 0;j<users.length;j++){
          if(data[i].id==users[j]){
            console.log(1)
            names.push(data[i].name)
          }
        }
        if(data[i].children && data[i].children.length > 0){
          console.log(names,data[i].children,users,data[i].children.length)
          this.diguiEvent(names,data[i].children,users)
        }
      }
    },