让element-ui的Cascader 级联选择器内容为空时候不显示

前段时间做的vue项目,使用到了element-ui里面的Cascader 级联选择器,用起来还是非常方便的,不过遇到了后面出现空白选项的问题,如下图:

在这里插入图片描述

刚开始想的是最后一层children字段既然为空,直接不返回字段不就行了,但是转念一想,万一人家以后有了又得处理一波,互相麻烦的事,还不如自己想办法解决。
后来发现,如果有最后一层children字段,children值为空数组的话,会显示暂无数据的空白项,但是如果当没有children字段没有或者children字段为undefined的时候,就不会显示暂无数据的空白项了。

queryUnitTree().then((res) => {									//请求Cascader树的值
        let child=res[0].children								//顶级树只有一个
          for(var i=0;i<child.length;i++){
            if(child[i].children.length<1){						//判断children的数组长度
              child[i].children=undefined;
            }
          }
        this.sswdData = res;									//sswdData 为Cascader的options值
      });

效果图:
在这里插入图片描述

有几个部分需要解释一下:
①上面直接用的res.children而不是res.data.children是因为在请求的时候已经做了判断,只成功的data值,失败的会拦截,所以这个res就相当于大多数项目中的res.data;
①因为我们项目的顶级树只有一个并且确定就只有一个,所以在代码中我直接用的res[0].children,如果顶级树大于一个的话外面还应多一层for循环

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值