Vue结合SpringBoot展示树形数据

1、方式一

递归查询
数据库中的表数据

定义实体类

public class Department implements Serializable {
    private Integer id;
    private String name;
    private Integer parentId;
    private String depPath;
    private Boolean enabled;
    private Boolean isParent;
    private List<Department> children = new ArrayList<>();
    private Integer result;

    public Department() {
    }

    public Department(String name) {
        this.name = name;
    }

    @Override
    public boolean equals(Object o) {

        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        Department that = (Department) o;
        return Objects.equals(name, that.name);
    }

    @Override
    public int hashCode() {

        return Objects.hash(name);
    }

    public Integer getResult() {
        return result;
    }

    public void setResult(Integer result) {
        this.result = result;
    }

    public List<Department> getChildren() {
        return children;
    }

    public void setChildren(List<Department> children) {
        this.children = children;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name == null ? null : name.trim();
    }

    public Boolean getEnabled() {
        return enabled;
    }

    public void setEnabled(Boolean enabled) {
        this.enabled = enabled;
    }

    public Integer getParentId() {
        return parentId;
    }

    public void setParentId(Integer parentId) {
        this.parentId = parentId;
    }

    public String getDepPath() {
        return depPath;
    }

    public void setDepPath(String depPath) {
        this.depPath = depPath;
    }

    public Boolean getParent() {
        return isParent;
    }

    public void setParent(Boolean parent) {
        isParent = parent;
    }
}

service类

@Service
public class DepartmentService {

    @Autowired
    DepartmentMapper departmentMapper;

    public List<Department> getAllDepartments() {
        return departmentMapper.getAllDepartmentsByParentId(-1);
    }
}

mybatis中的mapper.xml中SQL语句

	<resultMap id="BaseResultMap" type="com.wen.vhr_wen.model.Department">
        <id column="id" property="id" jdbcType="INTEGER"/>
        <result column="name" property="name" jdbcType="VARCHAR"/>
        <result column="parentId" property="parentId" jdbcType="INTEGER"/>
        <result column="depPath" property="depPath" jdbcType="VARCHAR"/>
        <result column="enabled" property="enabled" jdbcType="BIT"/>
        <result column="isParent" property="isParent" jdbcType="BIT"/>
	</resultMap>

    <resultMap id="DepartmentWithChildren" type="com.wen.vhr_wen.model.Department" extends="BaseResultMap">
        <collection property="children" ofType="com.wen.vhr_wen.model.Department"
                    select="com.wen.vhr_wen.mapper.DepartmentMapper.getAllDepartmentsByParentId" column="id"/>
    </resultMap>  
    
    <select id="getAllDepartmentsByParentId" resultMap="DepartmentWithChildren">
    select * from department where parentId=#{pid};
  </select>

vue前端代码

<template>
    <div style="width: 500px">
        <el-input
                placeholder="输入部门名称进行搜索..."
                prefix-icon="el-icon-search"
                v-model="filterText">
        </el-input>

        <el-tree
                :data="depts"
                :props="defaultProps"
                :filter-node-method="filterNode"
                :expand-on-click-node="false"
                ref="tree">
            <span class="custom-tree-node" style="display: flex;justify-content: space-between;width: 100%;"
                  slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span>
   </div>
</template>

<script>
    export default {
        name: "DepMana",
        data() {
            return {
                filterText: '',
                depts: [],
                dept: {
                    name: '',
                    parentId: -1
                },
                pName: '',
                dialogVisible: false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        //监听器，当filterText的值变化时会触发filterText(val)方法，
        //其中val的值就是filterText的最新值
        watch: {
            filterText(val) {
                //this.$refs.tree.filter(val)就会调用当前tree的filterNode这个方法
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            this.initDepts()
        },
        methods: {
        initDepts() {
                this.getRequest("/system/basic/department/").then(resp => {
                    if (resp) {
                        this.depts = resp
                    }
                })
            },
            //value值就是filterText的最新值，data数据就是形成tree的json数据
            filterNode(value, data) {
                // console.log(data)
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            }
         }
    }
</script>

2、方式二

嵌套for循环
数据库中的表结构

定义对应的实体类

@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;
}

service

@Service
public class EduSubjectServiceImpl extends ServiceImpl<EduSubjectMapper, EduSubject> implements EduSubjectService {

    @Override
    public List<OneSubject> getAllSubject() {

//        获取所有的一级分类信息
        QueryWrapper<EduSubject> eduSubjectQueryWrapper = new QueryWrapper<>();
        eduSubjectQueryWrapper.eq("parent_id","0");
        eduSubjectQueryWrapper.orderByAsc("id");
        List<EduSubject> eduSubjectsOne = baseMapper.selectList(eduSubjectQueryWrapper);

//        获取所有的二级分类信息
        QueryWrapper<EduSubject> eduSubjectQueryWrapper1 = new QueryWrapper<>();
        eduSubjectQueryWrapper.ne("parent_id","0");
        eduSubjectQueryWrapper.orderByAsc("id");
        List<EduSubject> eduSubjectsTwo = baseMapper.selectList(eduSubjectQueryWrapper1);
//        封装一级分类信息
        //创建list集合，用于存储最终封装数据
        List<OneSubject> oneSubjects = new ArrayList<>();
        for (EduSubject eduSubject : eduSubjectsOne) {
            OneSubject oneSubject = new OneSubject();
//            oneSubject.setId(eduSubject.getId());
//            oneSubject.setTitle(eduSubject.getTitle());
//            将eduSubject中的属性值赋给oneSubject
            BeanUtils.copyProperties(eduSubject,oneSubject);
            //        封装二级分类信息
            List<TwoSubject> twoSubjects = new ArrayList<>();
            for (int i = 0; i < eduSubjectsTwo.size(); i++) {
                TwoSubject twoSubject = new TwoSubject();
                EduSubject eduSubject1 = eduSubjectsTwo.get(i);
                //判断二级分类parentid和一级分类id是否一样
                if(eduSubject1.getParentId().equals(eduSubject.getId())){
                    BeanUtils.copyProperties(eduSubject1,twoSubject);
                    twoSubjects.add(twoSubject);
                }
            }
            //把一级下面所有二级分类放到一级分类里面
            oneSubject.setChildren(twoSubjects);
            oneSubjects.add(oneSubject);
        }
        return oneSubjects;
    }
}

前端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/subject/subject"

  export default {
    name: 'list',
    data() {
      return {
        filterText: '',
        data2: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val)
      }
    },
    created() {
      this.getSubjects();
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true
        return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
      },
      getSubjects() {
        Subject.getAllSubject().then(response => {
          this.data2 = response.data.list
        })
      }
    }
  }
</script>


<style scoped>

</style>