1. el-cascader 子级为空时不显示问题
使用element-ui的el-cascader级联组件时,当子级为空时,会展示暂无数据的的空白页,要求是无数据的不展示。
具体操作如下:
handleTreeList(list) { // 删除第三级children
for (var i = 0; i < list.length; i++) {
if (list[i].children.length < 1) { // 判断children的数组长度
list[i].children = undefined
} else {
this.handleTreeList(list[i].children)
}
}
return list
实现结果:
具体可参考:让element-ui的Cascader 级联选择器内容为空时候不显示
2. 只展示到相应层级
还有一个需求是,只展示到三级,三级之后的子级不再展示
具体操作如下:
handleTreeList(list) { // 删除第三级children
if (list.length > 0) {
for (let index = 0; index < list.length; index++) {
const element = list[index]
switch (element.level) {
case 1:
this.handleTreeList(element.children)
break
case 2:
this.handleTreeList(element.children)
break
case 3:
delete (element.children)
break
}
}
return list
}
},
实现结果:
这个和上面的区别就是,不管三级之后有没有数据,children是否为空,都给删除掉了。但是二级没有子级的时候还是会展示三级的暂无数据空白项。
三级之后无子级: