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

目录

一、前言

二、代码实例

1、数据库设计

2、实体类

3、controller

4、service

5、前端

---

一、前言

开发过程中，涉及到多级菜单的应用，树形结构比较常见，今天就做了一个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 children = new ArrayList<>();
}

二级实体类

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

3、controller

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

4、service

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

    //创建list集合，用于存储最终封装数据
    List 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 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页面 

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

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