el-cascader 子级为空时不显示问题/只展示到相应层级

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是否为空,都给删除掉了。但是二级没有子级的时候还是会展示三级的暂无数据空白项。

三级之后无子级:

猜你喜欢

转载自blog.csdn.net/m0_52545254/article/details/131107175