小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

背景

我们的项目中需要细分行业类型，故会有行业层级的选取，以供用户选择

1.出现的问题

el-cascader控件 最后一级出现空白 显示暂无数据

2.原因剖析

鉴于数据是从后台传递过来的，故先查看了数据格式，发现数据中的最底层子项中的children为空数组，经过调试分析出现空级联原因就是这个问题直接导致的。

3.解决办法

采用递归的方式，作判空处理，将子项为空的children赋值为undefined

<el-form-item v-if="$hasPermission('sys:zyindustry:getList')">
    <el-cascader
        placeholder="---请选择行业类型---"
        :clearable="true"
        :filterable="true"
        :options="optionIndustryType"
        :props="defaultProps"
        @change="handleChange"
        style="width:500px"
    >
    </el-cascader>
</el-form-item>

data(){
    return {
        optionIndustryType: [],
        defaultProps: {
            label: "industryName", // 显示的选项
            value: "id", // 选择的value值
            children: "children", // 子级属性名
            checkStrictly: true, // 可以选择任意一级
        }, // 指定层级属性
    }
}

async mounted () {
   this.optionIndustryType = await this.getTreeList()
}

//utils 方法

// 获取级联树结构列表
export function getTreeList() {
  let industryList = [];
  return new Promise((resolve, reject) => {
    this.$http.get(`/sys/zyindustry/getTreeList`).then(({ data }) => {
      if (data && data.code === 0) {
        industryList = getTreeData(data.industryList);
        resolve(industryList);
      } else {
        industryList = [];
        reject(industryList);
      }
    });
  });
}

// 递归判断列表，把最后的children设为undefined
function getTreeData(data) {
  for (let i = 0; i < data.length; i++) {
    if (data[i].children.length < 1) {
      // children若为空数组，则将children设为undefined
      data[i].children = undefined;
    } else {
      // children若不为空数组，则继续 递归调用 本方法
      getTreeData(data[i].children);
    }
  }
  return data;
}

最终效果