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

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

2. 问题原因分析

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

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

html代码

                           <el-cascader
                               :options="organizationData"
                                :props="leadProps"
                                clearable
                                v-model="powerForm.selectKeys"
                                @change="handleChange"
                            ></el-cascader>

js代码

利用js递归将最后一级空数组变成undefined

    getTreeData(data) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].children.length < 1) {
                    // 最后一级没有数据将children变成undefined
                    data[i].children = undefined;
                } else {
                    // children不为空时继续调用该方法
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        },

对后台数据进行调用递归函数进行转换 

  // 获取指标牵头单位数据
        async getOrganizationalData() {
            try {
                const { data: res } = await getOrganizationData();
                this.organizationData = this.getTreeData(res.organizationList);
            } catch (error) {
                this.$message.error(error.message);
            }
        },