实现课程前后台的多级联动

后台

SubjectVo

// 课程分类
@Data
public class SubjectVo {
    private String id;
    private String title;
    private Integer sort;
    private List<SubjectVo> children;
}

SubjectMapper

// 课程接口
public interface SubjectMapper {
    // 跟据父id嵌套查询subjectVo
    List<SubjectVo> selectNestedListByParentId(String parentId);
    // 最终格式 {1{5,6,7{3}},2{3,{5}},3{},4{}} 就是集合套集合
}

SubjectMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.javaclimb.service.edu.mapper.SubjectMapper">
	<resultMap id="nestedSubjectVo" type="mapper.SubjectVo">
    	<id property="id" column="id"></id>
        <result property="title" column="title"></result>
        <result property="sort" column="sort"></result>
        <collection property="children" 
                    column="id"
                    select="selectNestedListByParentId"	// collection 里面可以套一个查询id的select语句
                    oftype="mapper.SubjectVo"/>
    </resultMap>
    
    <select id="selectNestedListByParentId" resultMap="mapper.SubjectMapper">
    	select id,title,sort from edu_subject where parent_id = #{parentId} 
    </select>
	
</mapper>

service,controller直接调用就行

前端

// subjectList 接收 后台生成的 树状list
// 直接使用 elementUI 的树状组件 渲染即可
<template>
    <div class="app-container">
        <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
        </el-input>
        <el-tree
            class="filter-tree"
            :data="subjectList"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree">
        </el-tree>
    </div>
</template>