【Vue基础知识总结 5】Vue实现树形结构

- 日理万妓 2021-08-31 04:01 493阅读 0赞

## 一、前言 ##

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

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

效果展示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70][]

## 二、代码实例 ##

### 1、数据库设计 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 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_ 4_Vue]

下一篇：[【Vue基础知识总结 6】Spring Boot + Vue 全栈开发，都需要哪些前端知识？][Vue_ 6_Spring Boot _ Vue]

往期精彩内容：

[Java知识体系总结][Java]

[【全栈最全Java框架总结】SSH、SSM、Springboot][Java_SSH_SSM_Springboot]

[超详细的springBoot学习笔记][springBoot]

[常见数据结构与算法整理总结][Link 1]

[Java设计模式：23种设计模式全面解析][Java_23]

[Java面试题总结（附答案）][Java 1]

[MySql知识体系总结][MySql]

[Linux知识体系总结][Linux]

[Redis知识体系总结][Redis]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70]: /images/20210813/435bde3ffb58409f94eec22c9292babc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1]: /images/20210813/3285c4b1e7b24a039c401f2ff9962e31.png
[Vue_ 4_Vue]: https://blog.csdn.net/guorui_java/article/details/118979393
[Vue_ 6_Spring Boot _ Vue]: https://blog.csdn.net/guorui_java/article/details/106918275
[Java]: https://blog.csdn.net/guorui_java/article/details/112391105
[Java_SSH_SSM_Springboot]: https://blog.csdn.net/guorui_java/article/details/104018528
[springBoot]: https://blog.csdn.net/guorui_java/article/details/104137262
[Link 1]: https://blog.csdn.net/guorui_java/article/details/106217472
[Java_23]: https://blog.csdn.net/guorui_java/article/details/104026988
[Java 1]: https://blog.csdn.net/guorui_java/article/details/107803283
[MySql]: https://blog.csdn.net/guorui_java/article/details/118558095
[Linux]: https://blog.csdn.net/guorui_java/article/details/117430091
[Redis]: https://blog.csdn.net/guorui_java/article/details/116850879