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

最新推荐文章于 2025-03-11 03:30:28 发布

chengqiuming

最新推荐文章于 2025-03-11 03:30:28 发布

阅读量2.1k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/chengqiuming/article/details/110691097

版权

一获取一级分类

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&#