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

前言

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

<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>

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


本篇文章的例子最终实现的效果是这样的:
在这里插入图片描述
后台返回的数据是这样的:

{
    "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":"测试"
                        }
                    ]
                }
            ]
        }
    ]
}

一、数据库表结构设计

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 对应的实体类:

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 集合字段

2. controller

代码如下:

	@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

3. service

代码如下:

	@Override
    public List<TreeSelect> buildNatureTreeSelect(List<NatureTree> natureTrees)
    {
        List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
        return listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
    }
	@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;
    }
	/**
     * 递归列表
     */
    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);
                }
            }
        }
    }
	/**
     * 获取子节点列表
     */
    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;
    }
/**
     * 判断是否有子节点
     */
    private boolean hasChild(List<NatureTree> list, NatureTree t)
    {
        return getChildList(list, t).size() > 0 ? true : false;
    }
// 经过 buildNatureTree 处理过的 listNatureTrees 中的 NatureTree,children 属性就都有数据了
List<NatureTree> listNatureTrees = buildNatureTree(natureTrees);
// 然后就是将 listNatureTrees 处理成最终格式的数据
listNatureTrees.stream().map(TreeSelect::new).collect(Collectors.toList());

TreeSelect 类

/**
 * 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 流。至此,我们的数据结构就构建完成了

4. 数据初始化

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

三、总结

以上树结构的数据是提前在数据库中初始化好的,下一篇会探讨树节点增删改的问题,这个相对来说就比较简单了。

  • 7
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue组件<el-select-tree>是一个结合了ElementUIel-select和el-tree的下拉树型选择组件。通过这个组件,可以实现选择任意一个父集的子集,并获取当前子集的父级并进行保存操作。 在使用情景中,可以将下拉树看作是树与下拉框的结合版,但是树的点击事件在下拉树中并不适用。解决这个问题的办法是通过下拉树组件自带方法@confirm来完成。在使用@confirm方法之前,需要将需要的数据传入,否则点击事件不会获取任何数据。然后在方法中进行匹配循环,找出子集对应的父级并一起存入数组中。 需要注意的是,在面临编辑操作的情景中,如果将下拉树的数据传回来默认展示在下拉框中,传回来的数据包含一个父级,可能会导致此父级元素全被默认选择。因此,在处理数据时,需要将父级排除以避免这个问题的发生。 总结起来,使用<el-select-tree>组件可以实现下拉树型选择,并获取选择子集的父级进行保存操作。虽然这个方法看起来繁琐,但目前还没有更好的办法来处理这个问题。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [el-select-tree:ElementUIel-select与el-tree结合](https://download.csdn.net/download/weixin_42135773/18435535)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue组件el-select-tree>的使用](https://blog.csdn.net/weixin_44519803/article/details/119748522)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值