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

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

让element-ui的Cascader 级联选择器内容为空时候不显示_第1张图片

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

queryUnitTree().then((res) => {									//请求Cascader树的值
        let child=res[0].children								//顶级树只有一个
          for(var i=0;i

效果图:
让element-ui的Cascader 级联选择器内容为空时候不显示_第2张图片

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

你可能感兴趣的:(element-ui,elementui,vue)