一、需求

二、获取一级分类

1、组件数据定义

定义在data中

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

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>

3、组件脚本

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

import subject from '@/api/edu/subject'
定义方法
init() {
   ......
   // 初始化分类列表
   this.initSubjectList()
},
initSubjectList() {
  subject.getNestedTreeList().then(response => {
    this.subjectNestedList = response.data.items
  })
},

三、级联显示二级分类

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>

2、注册change事件

在一级分类的组件中注册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 = ''
         }
     }
},