【Vue基础知识总结 5】Vue实现树形结构(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页面

<el-tree

ref=“tree2”

:data=“data2”

:props=“defaultProps”

:filter-node-method=“filterNode”

class=“filter-tree”

default-expand-all

/>