elementui el-cascader出现空白选项卡,无法选中

elementui el-cascader内部没有处理子数据为空数组的逻辑,所以我们要自己递归数据,把空数组的子元素清掉,当数据量特别大的时候,我认为会很耗性能,但是目前没别的办法。

// An highlighted block
<el-cascader
  ref="deviceTypeCascader"
  v-model="form.deviceTypeCode" //绑定的值
  clearable//是否显示清除按钮
  :show-all-levels="false"//是否展示完整路径
  :options="deviceTypeCodeMap"//展示数据
  :props="deviceTypeProps"//配置选项
/>
// An highlighted block
data() {
    return {
    	deviceTypeProps: {
	        label: 'typeName',//标签名称
	        children: 'nextList',//子元素数组数据
	        value: 'typeCode',//选中的属性值
	        emitPath: false //在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值
      },
	}
}
// An highlighted block
//递归设备类型多级列表,删除nextList空数组
recursion(res){
  res.forEach(item => {
    if(item['nextList'].length){
      this.recursion(item['nextList'])
    }else{
      delete item['nextList'];
    }
  });
},

在接口回调里拿到数据再去做递归清除

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值