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

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)
          }
        })
      },