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

￡神魔★判官ぃ 2022-09-16 03:41 1074阅读 0赞

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qGD5qGD4pGh_size_20_color_FFFFFF_t_70_g_se_x_16]

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

2.1 html代码

<el-cascader v-model="busAreaForm.codeUp" placeholder="请选择" :options="codeUpList" :props="{ checkStrictly: true }" show-all-levels ></el-cascader>

2.2 JS处理

const getRightsTree = () => { 
      api.businessArea.getRightsTree().then(res => { 
        busArea.codeUpList = res.data
        rewriteKey(busArea.codeUpList)
      })
    }
    const rewriteKey = (val) => { 
      val.forEach(item => { 
        item.label = item.bizName
        item.value = item.bizCode
        item.children = item.childrenList.length !== 0 ? item.childrenList : undefined
        if (item.children) { 
          rewriteKey(item.children)
        }
      })
    }

### 3. 解决后效果 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qGD5qGD4pGh_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qGD5qGD4pGh_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/30e8382dfabc4c29bcdbb2498ac26c71.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5qGD5qGD4pGh_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/939c9df9ee914a0ab6dc3b50fdca8bdc.png