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

一、前言

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