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

2022-05-26 17:03:49 阅读：139 来源： 互联网

标签：SubjectMapper String title 多级 private 课程联动 id

后台

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=""	// collection 里面可以套一个查询id的select语句
                    oftype="mapper.SubjectVo"/>
    </resultMap>
    
    <select id="mapper.SubjectMapper.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>

标签：SubjectMapper,String,title,多级,private,课程,联动,id
来源： https://www.cnblogs.com/mybloger/p/16314060.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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