级联选择器处理回显数据格式，解决下拉选空白值的问题

最新推荐文章于 2023-12-27 15:55:41 发布

lilyheart1

最新推荐文章于 2023-12-27 15:55:41 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： element ui级联选择器树组件回显值的问题下拉选出现空白值

本文链接：https://blog.youkuaiyun.com/lilyheart1/article/details/115089076

前端专栏收录该内容

26 篇文章

订阅专栏

在Vue项目中遇到树形组件显示时，如果后端返回的数据中children为空数组，导致显示空白。通过循环遍历数据并递归设置children为undefined，成功解决了这个问题。代码实现包括对JSON数据的遍历和条件判断，确保了当children无内容时正确处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做树组件回显时，有选项中出现空白值的情况，检查了后端返回的数据个是都对着，但是children没有内容时，返回的数据中children:[]，这种样子，通过递归修改children的值即可，直接上代码：

HTML部分：

  <el-cascader
      :props="defaultParams"
      :options="options"
  ></el-cascader>

JavaScript部分：

getTreeData(data){
   // 循环遍历json数据
   for(var i=0;i<data.length;i++){
     if(data[i].children.length<1){
       // children若为空数组，则将children设为undefined
       data[i].children=undefined;
      }else {
        // children若不为空数组，则继续调用本方法
        this.getTreeData(data[i].children);
      }
    }
   return data;
}

暂时解决了树的问题。