elementUI中el-table树形与el-tree树形结构的一键折叠与展开

1.业务需求:
  • vue项目,权限菜单管理中菜单table的树形结构,一般情况下如果使用的是elementUI那么可以使用里面el-table的树形结构,实际场景需要一键折叠/展开功能。当选择上级目录时需要通过el-tree树形获取目录的树形结构,此时也需要一键折叠/展开功能。
2.需求分析:
  • 一键折叠/展开功能就是点击它之后,如果他是所有展开的,那么让他所有折叠,反之让他所有展开。
3.解决方案el-table树形:
  • el-table树形结构的一键折叠/展开功能其实就是与el-table中的 toggleRowSelection 方法密切相关,但是它只是改变某一个节点的,要改变所有节点的话那么就需要这样处理:

  •       // 是否展开table(展开与折叠切换)
          handleExpand() {
            this.isExpand = !this.isExpand
            this.$nextTick(() => {
              this.forArr(this.tableData, this.isExpand)
            })
          },
           // 遍历
          forArr(arr, isExpand) {
            arr.forEach(i => {
              // toggleRowExpansion(i, isExpand)用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
              this.$refs.tableData.toggleRowExpansion(i, isExpand)
              if (i.children) {
                this.forArr(i.children, isExpand)
              }
            })
          },
    
  • 效果如下:
    在这里插入图片描述
    在这里插入图片描述

4.解决方案el-tree树形
  • el-tree树形的一键折叠与展开其实是与store.nodesMap[treeData[i].key].expanded属性密切相关的(此时注意:el-tree的node-key属性对应的key值一定要唯一),它是通过每一条树形数据的ID的expanded进行设置实现折叠与展开的,它的处理方法为:
    // 一键折叠/展开(这里的isExpand变量需要绑定到el-tree的`default-expand-all`属性上)
     isExpandF() {
        this.isExpand = !this.isExpand
        this.expandFunc(this.LimitData)
      },
	// 遍历树形数据,通过设置每一项的expanded属性,实现展开与折叠
	 expandFunc(data) {
        data.forEach(item=> {
          this.$refs.menutree.store.nodesMap[item.sysResourcesId].expanded = this.isExpand
          if (item.children.length>0) {
            this.expandFunc(item.children)
          }
        })
      },
Logo

前往低代码交流专区

更多推荐