Vue基础知识总结 5：vue实现树形结构

关注

原创最新推荐文章于 2026-09-20 14:22:09 发布 1.7w 阅读 AI 写同款· GEO 优化 ›

【Vue基础知识总结 5】Vue实现树形结构，4面阿里拿到P7Offer 如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。阅读详情

一、前言

开发过程中，涉及到多级菜单的应用，树形结构比较常见，今天就做了一个Spring Boot + Vue + Element-UI 实现树形结构的一个小demo。

Tree组件最适合的结构是无序列列表ul，创建一个递归组件Item表示Tree选项，如果当前Item存在 children，则递归渲染子树，以此类推;同时添加一个标识管理理当前层级item的展开状态。

效果展示：

二、代码实例

1、数据库设计

2、实体类

一般树形结构都是创建若干层实体类，然后通过list结合在一起，面向对象编程

一级实体类

@Data
public class OneSubject {
    private String id;
    private String title;
    private List<TwoSubject> children = new ArrayList<>();
}

二级实体类

@Data
public class TwoSubject {
    private String id;
    private String title;
}

3、controller

@GetMapping("getAllSubject")
public R getAllSubject(){
    List<OneSubject> list = subjectService.getAllOneTwoSubject();
    return R.Ok().data("list",list);
}

4、service

//课程分类列表（树形）
@Override
public List<OneSubject> getAllOneTwoSubject() {
    //1 查询所有一级分类
    QueryWrapper<EduSubject> wrapperOne = new QueryWrapper<>();
    wrapperOne.eq("parent_id","0");
    List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne);
    //2 查询所有2级分类
    QueryWrapper<EduSubject> wrapperTwo = new QueryWrapper<>();
    wrapperTwo.ne("parent_id","0");
    List<EduSubject> twoSubjectList = baseMapper.selectList(wrapperTwo);

    //创建list集合，用于存储最终封装数据
    List<OneSubject> finalSubjectList = new ArrayList<>();
    //3、封装一级分类
    for (int i = 0; i < oneSubjectList.size(); i++) {
        EduSubject eduSubject = oneSubjectList.get(i);
        OneSubject oneSubject = new OneSubject();
        BeanUtils.copyProperties(eduSubject,oneSubject);

        //在一级分类循环遍历查询所有的二级分类
        //创建list集合封装每一个一级分类的二级分类
        List<TwoSubject> twoFinalSubjectList = new ArrayList<>();
        for (int j = 0; j < twoSubjectList.size(); j++) {
            EduSubject tSubject = twoSubjectList.get(j);
            if(tSubject.getParentId().equals(oneSubject.getId())){
                TwoSubject twoSubject = new TwoSubject();
                BeanUtils.copyProperties(tSubject,twoSubject);
                twoFinalSubjectList.add(twoSubject);
            }
        }
        //把一级下面所有的二级分类放入一级分类中
        oneSubject.setChildren(twoFinalSubjectList);
        finalSubjectList.add(oneSubject);
    }
    //4、封装二级分类
    return finalSubjectList;
}

5、前端

JavaScript

import request from '@/utils/request'
export default {
    //1 课程分类列表
    getSubjectList() {
        return request({
            url: '/eduservice/subject/getAllSubject',
            method: 'get'
          })
    }
}

Vue页面

<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />
  </div>
</template>

<script>
import subject from '@/api/edu/subject'
export default {
  data() {
    return {
      filterText: '',
      data2: [],  //返回所有分类数据
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created() {
      this.getAllSubjectList()
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },

  methods: {
    getAllSubjectList() {
        subject.getSubjectList()
            .then(response => {
                this.data2 = response.data.list
            })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    }
  }
}
</script>

上一篇：Vue知识体系总结 4：Vue组件化开发

下一篇：Vue基础知识总结 6：vue双向绑定原理

收录于