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

最新推荐文章于 2025-05-30 09:06:24 发布

原创

最新推荐文章于 2025-05-30 09:06:24 发布 · 6.3k 阅读

标签

#java #elementui #vue.js

本文介绍如何使用Vue+ElementUI构建树形结构数据，并详细解释了数据库设计、实体类定义、控制器和服务层实现等关键步骤。

前言

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":"短路"
                        }
                    ]

最低0.47元/天解锁文章