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

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

vue解决Element-ui中 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. 解决后效果

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

上一篇:el-cascader__点击文字可选中__去掉单选按钮__选中后菜单收起__自定义数据显示在选项中(已测有用)


下一篇:elementui中的<el-cascader>级联选择器