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

76 篇文章 0 订阅
27 篇文章 2 订阅
在Vue应用中遇到el-cascader组件最后一级显示空白的问题,解决方案是通过递归方式设置子节点为undefined。通过修改JS代码,遍历并更新选项列表,确保当子节点为空时,将其设置为undefined。此方法成功解决了空白显示的bug,使得控件能够正确展示所有层级的数据。
摘要由CSDN通过智能技术生成

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

在这里插入图片描述

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. 解决后效果

在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值