HuTool工具类TreeUtil简单使用

按照逻辑需求，将顶点，父节点，子节点按照需求查询得出list，而后放入nodeList里面，既可按照文档实例构造出前端所需的树形结构数据。在设置好treeNodeConfig配置以及自己额外增加的数据之后，即可传入转换器进行构造。最后返还treeNodes。2，在这里我们选择使用TreeUtil工具类能够事半功倍。1，根据需求，需要实现如下图结构。

玉之之

6942人浏览 · 2022-09-02 17:48:41

玉之之 · 2022-09-02 17:48:41 发布

1，根据需求，需要实现如下图结构

2，在这里我们选择使用TreeUtil工具类能够事半功倍。

Hutool参考文档

思路如下：

按照逻辑需求，将顶点，父节点，子节点按照需求查询得出list，而后放入nodeList里面，既可按照文档实例构造出前端所需的树形结构数据。

后端实现：

/**
     * 初始化树形
     * @return
     */
    public List<Tree<String>>  initOfficeDocTreeList(){
        // 构建node列表
        List<OfficeDocTreeVo> nodeList=CollUtil.newArrayList();
        //调整节点
        for (OfficeDocTreeVo node:officeDocumentDao.getNodeList()){
            node.setIsAuthorName(node.getId());
            node.setParentid("0");
            node.setTotal("0");
            nodeList.add(node);
        }
        //调整节点数据
        int num=0;
        for (OfficeDocTreeVo info:officeDocumentDao.getNodeInfo()){
            //节点数据主键自增
            info.setId(Integer.toString(num++));
            nodeList.add(info);
        }
        //配置
        TreeNodeConfig treeNodeConfig = new TreeNodeConfig();
        // 自定义属性名 都要默认值的
        treeNodeConfig.setIdKey("id");
        treeNodeConfig.setParentIdKey("parentid");
        treeNodeConfig.setNameKey("isAuthorName");
        // 最大递归深度
        treeNodeConfig.setDeep(2);

        //转换器
        // 0表示最顶层的id是0
        List<Tree<String>> treeNodes = TreeUtil.build(nodeList, "0", treeNodeConfig,
                (treeNode, tree) -> {
                    tree.setId(treeNode.getId());
                    tree.setParentId(treeNode.getParentid());
                    tree.setName(treeNode.getIsAuthorName());
                    //扩展属性
                    tree.putExtra("total",treeNode.getTotal());
                    tree.putExtra("dispatchnoId",treeNode.getDispatchnoId());
                });
        return treeNodes;
    }

在设置好treeNodeConfig配置以及自己额外增加的数据之后，即可传入转换器进行构造。最后返还treeNodes。

前端实现：

<div class="public-tree">
           <el-tree :data="data" :props="defaultProps" default-expand-all :highlight-current="true" @node-click="handleNodeClick">
              <span slot-scope="{ data }">
               <i :class="data.icon"></i>
              <span style="padding-left: 4px;">{{data.isAuthorName}}</span>
              </span>
           </el-tree>
          </div>

前端准备数据：

data: [
        {
            isAuthorName: '文书档案' ,
            dispatchnoId:"top",
            children:[{
              label:"",
              children:[{
                label:"",
              }]
            }]
        }
      ],

注意数据结构以及字段绑定即可。