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

最新推荐文章于 2026-02-21 16:42:49 发布

原创最新推荐文章于 2026-02-21 16:42:49 发布 · 2.2k 阅读

6 ·

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

收录于

Vue

一获取一级分类

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>