下拉列表多级联动前端实现

川长思鸟来 2021-07-24 19:04 543阅读 0赞

# 一 获取一级分类 #

## 1 组件数据定义 ##

添加在Info.vue的data中

subjectList: [], // 一级分类
          subjectLevelTwoList: [] // 二级分类

## 2 组件脚本 ##

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

import subjectApi from '@/api/subject'

定义方法

// 获取课程分类列表
        initSubjectList() {
          subjectApi.getNestedTreeList().then(response => {
            this.subjectList = response.data.items
          })
        },

页面加载时

created() {
        // 获取讲师列表
        this.initTeacherList()
        // 初始化分类列表
        this.initSubjectList()
    },

## 3 组件模板 ##

<el-form-item label="课程分类">
            
            <el-select
              v-model="courseInfo.subjectParentId"
              placeholder="请选择"
              @change="subjectChanged">
              <el-option
                v-for="subject in subjectList"
                :key="subject.id"
                :value="subject.id"
                :label="subject.title" />
            </el-select>
          </el-form-item>

# 二 级联显示二级分类 #

## 1 注册change事件 ##

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

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

## 2 定义change事件方法 ##

// 切换一级类别下拉列表
        subjectChanged(value) {
          console.log('value', value)
          // 遍历一级类别列表
          this.subjectList.forEach(subject => {
            // 判断当前选中的一级类别是否和当前遍历的一级类别的id一致
            if (subject.id === value) {
              // 清空当前值
              this.courseInfo.subjectId = ''
              // 如果一致，则将当前遍历的一级类别的子类别绑定在页面的二级类别列表中
              this.subjectLevelTwoList = subject.children
            }
          })
        },

## 3 组件模板 ##

<el-select
              v-model="courseInfo.subjectId"
              placeholder="请选择">
              <el-option
                v-for="subject in subjectLevelTwoList"
                :key="subject.id"
                :value="subject.id"
                :label="subject.title" />
            </el-select>

# 三 测试 #

![20201205153526901.png][]

[20201205153526901.png]: /images/20210724/fc9fb82d24d84d82b08810e7d8baa571.png