ElementUI 树型组件 el-tree 后台数据结构构

发表于

前言

Vue+ElementUI 是目前项目开发中普遍使用的前端技术，我们在开发中肯定会遇到用树形展示数据的需求，比如公司和部门，公司下面有多个部门，部门下面又有多个班组，每个部门或者班组下有相关人员，此时我们就可以使用ElementUI 的 tree 组件来实现，前端根据官网上的例子，需要的数据是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
javascript复制代码<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

效果是这样的：
在这里插入图片描述
接下来就是后台去构建这样结构的数据，然后提供接口给前端了。

本篇文章的例子最终实现的效果是这样的：

在这里插入图片描述

后台返回的数据是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
json复制代码{
    "msg":"操作成功",
    "code":200,
    "data":[
        {
            "id":1,
            "label":"停电性质",
            "children":[
                {
                    "id":2,
                    "label":"故障停电",
                    "children":[
                        {
                            "id":6,
                            "label":"短路"
                        }
                    ]
                },
                {
                    "id":3,
                    "label":"预安排停电"
                },
                {
                    "id":4,
                    "label":"临时停电"
                },
                {
                    "id":5,
                    "label":"限电",
                    "children":[
                        {
                            "id":24,
                            "label":"测试"
                        }
                    ]
                }
            ]
        }
    ]
}

一、数据库表结构设计

1
2
3
4
5
6
7
8
9
sql复制代码create table SYS_NATURE_TREE
(
  nature_tree_id   NUMBER not null,
  nature_tree_name VARCHAR2(50),
  parent_id        NUMBER,
  parent_ids       VARCHAR2(50),
  show_order       NUMBER,
  enable_flag	   NUMBER
)

其中 nature_tree_id 是主键、nature_tree_name 就是我们要展示的树节点的名称了，parent_id 是当前节点的父级，parent_ids 是当前节点的所有父级，用‘，’隔开。

二、具体实现

  1. entity

SYS_NATURE_TREE 对应的实体类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
java复制代码public class NatureTree {

    private Integer natureTreeId;

    private String natureTreeCode;

    private String natureTreeName;

    private Integer parentId;

    private String parentIds;

    private Integer showOrder;

	private Integer enableFlag;

	/** 子节点 List 集合 */
    private List<NatureTree> children;

	/** 构造器、get set 方法等省略了 **/
	...

实体类里加了子节点的 List 集合字段

  1. controller

代码如下：

1
2
3
4
5
6
7
8
java复制代码	@GetMapping("/blackoutNatureTreeSelect")
    public BaseApiService blackoutNatureTreeSelect(NatureTree natureTree)
    {
        // 先查出来 SYS_NATURE_TREE 表中的所有数据
        List<NatureTree> natureTrees = blackoutNatureService.selectNatureTreeList(natureTree);
        // 返回构建好的数据
        return BaseApiService .success(blackoutNatureService.buildNatureTreeSelect(natureTrees));
    }

思路是先将 sys_nature_tree 表中的数据全部查出来，然后作为参数传入构建数据结构的方法 buildNatureTreeSelect。重点是这个 service 方法 buildNatureTreeSelect

  1. service

代码如下：

1
2
3
4
5
6
java复制代码	@Override
    public List<TreeSelect> buildNatureTreeSelect(List<NatureTree> natureTrees)
    {
        List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
        return listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
java复制代码	@Override
    public List<NatureTree> buildNatureTree(List<NatureTree> natureTrees) {
    	// 初步处理好的数据
        List<NatureTree> returnList = new ArrayList<NatureTree>(); 
        // 所有树 treeId 的 List 集合
        List<Integer> tempList = new ArrayList<Integer>(); 
        for (NatureTree natureTree : natureTrees)
        {
            tempList.add(natureTree.getNatureTreeId());
        }
        // 遍历所有树节点（一个树节点就是数据库中的一条数据）
        for (Iterator<NatureTree> iterator = natureTrees.iterator(); iterator.hasNext();)
        {
            NatureTree natureTree = (NatureTree) iterator.next();
            // 如果是顶级节点, 遍历该父节点的所有子节点
            if (!tempList.contains(natureTree.getParentId()))
            {
            	// 递归处理数据，此处传入的 natureTree 是最顶级节点，没有父节点
                recursionFn(natureTrees, natureTree);
                returnList.add(natureTree);
            }
        }
        if (returnList.isEmpty())
        {
            returnList = natureTrees;
        }
        return returnList;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
java复制代码	/**
     * 递归列表
     */
    private void recursionFn(List<NatureTree> list, NatureTree t)
    {
        // 获取此节点的子节点列表
        List<NatureTree> childList = getChildList(list, t);
        // 将子节点 List set 进去
        t.setChildren(childList);
        for (NatureTree tChild : childList)
        {
            if (hasChild(list, tChild))
            {
                // 判断是否有子节点
                Iterator<NatureTree> it = childList.iterator();
                while (it.hasNext())
                {
                    NatureTree n = (NatureTree) it.next();
                    // 递归
                    recursionFn(list, n);
                }
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
java复制代码	/**
     * 获取子节点列表
     */
    private List<NatureTree> getChildList(List<NatureTree> list, NatureTree t)
    {
        List<NatureTree> tlist = new ArrayList<NatureTree>();
        Iterator<NatureTree> it = list.iterator();
        while (it.hasNext())
        {
            NatureTree n = (NatureTree) it.next();
            if (StringUtils.isNotNull(n.getParentId()) && n.getParentId().intValue() == t.getNatureTreeId().intValue())
            {
                tlist.add(n);
            }
        }
        return tlist;
    }
1
2
3
4
5
6
7
java复制代码/**
     * 判断是否有子节点
     */
    private boolean hasChild(List<NatureTree> list, NatureTree t)
    {
        return getChildList(list, t).size() > 0 ? true : false;
    }
1
2
3
4
java复制代码// 经过 buildNatureTree 处理过的 listNatureTrees 中的 NatureTree，children 属性就都有数据了
List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
// 然后就是将 listNatureTrees 处理成最终格式的数据
listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());

TreeSelect 类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
java复制代码/**
 * Treeselect树结构实体类
 * 
 * @author wangpsh
 */
public class TreeSelect implements Serializable
{
    private static final long serialVersionUID = 1L;

    /** 节点ID */
    private Long id;

    /** 节点名称 */
    private String label;

    /** 子节点 */
    @JsonInclude(JsonInclude.Include.NON_EMPTY)
    private List<TreeSelect> children;

    public TreeSelect()
    {

    }

    public TreeSelect(NatureTree natureTree)
    {
        this.id = (long) natureTree.getNatureTreeId();
        this.label = natureTree.getNatureTreeName();
        this.children = natureTree.getChildren().stream().map(TreeSelect::new).collect(Collectors.toList());
    }

    public Long getId()
    {
        return id;
    }

    public void setId(Long id)
    {
        this.id = id;
    }

    public String getLabel()
    {
        return label;
    }

    public void setLabel(String label)
    {
        this.label = label;
    }

    public List<TreeSelect> getChildren()
    {
        return children;
    }

    public void setChildren(List<TreeSelect> children)
    {
        this.children = children;
    }
}

上面贴出了最主要的代码，用到了 java 8 的 stream 流。至此，我们的数据结构就构建完成了

  1. 数据初始化

数据库中初始化一些数据，其中的停电性质就是顶级节点
在这里插入图片描述

三、总结

以上树结构的数据是提前在数据库中初始化好的，也可以将树节点添加上增删改功能，这个相对来说就比较简单了。

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%