课程分类多级联动的实现

# 一、需求

# 二、获取一级分类

# 1、组件数据定义

定义在data中

subjectNestedList: [],//一级分类列表
subSubjectList: []//二级分类列表

1
2

# 2、组件模板

<!-- 所属分类：级联下拉列表 -->
<!-- 一级分类 -->
<el-form-item label="课程类别">
  <el-select
    v-model="courseInfo.subjectParentId"
    placeholder="请选择">
    <el-option
      v-for="subject in subjectNestedList"
      :key="subject.id"
      :label="subject.title"
      :value="subject.id"/>
  </el-select>
</el-form-item>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 3、组件脚本

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

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

定义方法

init() {
  ......
  // 初始化分类列表
  this.initSubjectList()
},

initSubjectList() {
  subject.getNestedTreeList().then(response => {
    this.subjectNestedList = response.data.items
  })
},

1
2
3
4
5
6
7
8
9
10
11

# 三、级联显示二级分类

# 1、组件模板

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

1
2
3
4
5
6
7
8

# 2、注册change事件

在一级分类的<el-select>组件中注册change事件

 <el-select @change="subjectLevelOneChanged" ......

# 3、定义change事件方法

subjectLevelOneChanged(value) {
    console.log(value)
    for (let i = 0; i < this.subjectNestedList.length; i++) {
        if (this.subjectNestedList[i].id === value) {
            this.subSubjectList = this.subjectNestedList[i].children
            this.courseInfo.subjectId = ''
        }
    }
},

1
2
3
4
5
6
7
8
9

编辑

上次更新: 2024/06/15, 15:12:25

← 编辑课程基本信息讲师下拉列表→