Day07-添加课程信息（3）--课程分类多级联动-p112

最新推荐文章于 2026-04-24 09:49:54 发布

原创最新推荐文章于 2026-04-24 09:49:54 发布 · 494 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

在线教育项目

本文介绍如何在课程信息管理系统中实现课程分类的多级联动选择功能，包括获取一级分类、级联显示二级分类等步骤。

上一节：添加课程信息（2）–实现讲师下拉列表

添加课程信息（3）--课程分类多级联动

1、需求
2、获取一级分类
3、级联显示耳机分类

1、需求

在这里插入图片描述

2、获取一级分类

2.1、组件数据定义

定义在data中
在这里插入图片描述

data(){
    return {
        saveBtnDisabled:false,
        courseInfo:{
            title: '',
            //一级分类Id
            subjectParentId:'',
            //二级分类Id
            subjectId: '',
            teacherId: '',
            lessonNum: 0,
            description: '',
            cover: '',
            price: 0
        },
        teacherList:[],//封装所有讲师
        subjectOneList:[],//一级分类
        subjectTwoList:[]//二级分类
    }
},

2.2、组件模板

在这里插入图片描述

<!-- 所属分类 TODO -->
<!-- key:唯一标识     label:显示的名称    value:实际传递的值 -->
<el-form-item label="课程分类">
<el-select
    v-model="courseInfo.subjectParentId"
    placeholder="一级分类" @change="subjectLevelOneChanged">
    <el-option
    v-for="subject in subjectOneList"
    :key="subject.id"
    :label="subject.title"
    :value="subject.id"/>
</el-select>
</el-form-item>

2.3、组件脚本

表单初始化时获取一级分类嵌套列表，引入subject api

import subject from '@/api/edu/subject'

2.4、定义方法

在这里插入图片描述

   //查询所有一级分类
        getOneSubject(){
            subject.getSubjectList()
                .then(response=>{
                    this.subjectOneList = response.data.list
                })
        },

3、级联显示耳机分类

3.1、组件模板

  <!-- 二级分类  -->
        <el-select
            v-model="courseInfo.subjectId"
            placeholder="二级分类">
            <el-option
            v-for="subject in subjectTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>

3.2、注册change事件

在一级分类的组件中注册change事件
在这里插入图片描述

@change="subjectLevelOneChanged"

3.3、定义change事件方法

在这里插入图片描述

{
//点击某个一级分类，触发change事件，显示对应二级分类
subjectLevelOneChanged(value){
    //value就是一级分类的id值
    //遍历所有的分类，包含一级和二级
    for(var i= 0;i<this.subjectOneList.length;i++){
        //每个一级分类
        var oneSubject = this.subjectOneList[i]
        //判断：所有一级分类id 和 点击一级分类id是否一样
        if(value === oneSubject.id){
            //从一级分类获取里面所有的二级分类
            this.subjectTwoList = oneSubject.children
            //把二级分类id值清空
            this.courseInfo.subjectId = ''
        }
    }
},

下一节：课程信息管理（4）–课程封面图片上传