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

一、业务需求

vue项目，菜单管理中菜单table的树形结构，一般情况下如果使用的是elementUI那么可以使用里面el-table的树形结构，实际场景需要一键折叠/展开功能。当选择上级目录时需要通过el-tree树形获取目录的树形结构，此时也需要一键折叠/展开功能。

二、解决方案

el-table树形结构的一键折叠/展开功能其实就是与el-table中的 toggleRowSelection 方法密切相关，但是它只是改变某一个节点的，要改变所有节点的话那么就需要这样处理：

三、完成效果

1）展开

2）折叠

  <el-form-item label="菜单权限">
        <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
        <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
        <el-checkbox v-model="dataForm.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动
        </el-checkbox>
        <el-tree
          class="tree-border"
          :data="menuList"
          show-checkbox
          ref="menuListTree"
          node-key="menuId"
          :check-strictly="!dataForm.menuCheckStrictly"
          empty-text="加载中，请稍后..."
          :props="menuListTreeProps"
        ></el-tree>
  </el-form-item>

 // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      let treeList = this.menuList;
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.menuListTree.store.nodesMap[treeList[i].menuId].expanded = value;
        this.$refs.menuListTree.root.expanded = value;
      }
    },

注意：最重要的还是node-key="menuId"

项目源码在此：项目源码