vue如何实现下拉框二级联动效果

这篇文章主要介绍vue如何实现下拉框二级联动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1、实现效果

2、后端返回的数据格式

"list": [       {         "id": "1178214681118568449",         "title": "后端开发",         "children": [           {             "id": "1178214681139539969",             "title": "Java"           },           {             "id": "1178585108407984130",             "title": "Python"           },           {             "id": "1454645056483913730",             "title": "C++"           },           {             "id": "1454645056731377666",             "title": "C#"           }         ]       },       {         "id": "1178214681181483010",         "title": "前端开发",         "children": [           {             "id": "1178214681210843137",             "title": "JavaScript"           },           {             "id": "1178585108454121473",             "title": "HTML/CSS"           }         ]       },       {         "id": "1178214681231814658",         "title": "云计算",         "children": [           {             "id": "1178214681252786178",             "title": "Docker"           },           {             "id": "1178214681294729217",             "title": "Linux"           }         ]       },       {         "id": "1178214681324089345",         "title": "系统/运维",         "children": [           {             "id": "1178214681353449473",             "title": "Linux"           },           {             "id": "1178214681382809602",             "title": "Windows"           }         ]       },       {         "id": "1178214681399586817",         "title": "数据库",         "children": [           {             "id": "1178214681428946945",             "title": "MySQL"           },           {             "id": "1178214681454112770",             "title": "MongoDB"           }         ]       },       {         "id": "1178214681483472898",         "title": "大数据",         "children": [           {             "id": "1178214681504444418",             "title": "Hadoop"           },           {             "id": "1178214681529610242",             "title": "Spark"           }         ]       },       {         "id": "1178214681554776066",         "title": "人工智能",         "children": [           {             "id": "1178214681584136193",             "title": "Python"           }         ]       },       {         "id": "1178214681613496321",         "title": "编程语言",         "children": [           {             "id": "1178214681626079234",             "title": "Java"           }         ]       }     ]

数据格式不一定和上面的一样，我上一篇文章是把这个数据格式用在了树形控件上面，这里放在二级联动上面。

3、vue页面中

 <!-- 所属分类 TODO -->       <el-form-item label="课程分类">         <!--一级分类-->         <el-select           v-model="courseInfo.subjectParentId"           placeholder="一级分类" @change="subjectLevelOneChanged">           <el-option             v-for="subject in subjectOneList"             :key="subject.id"             :label="subject.title"             :value="subject.id"/>         </el-select>         <!-- 二级分类 -->         <el-select v-model="courseInfo.subjectId" placeholder="请选择">           <el-option             v-for="subject in subjectTwoList"             :key="subject.value"             :label="subject.title"             :value="subject.id"/>         </el-select>       </el-form-item>

import course from '@/api/edu/course' import subject from '@/api/edu/subject' export default {   data() {     return {       saveBtnDisabled: false, // 保存按钮是否禁用       courseInfo:{         title: '',         subjectId: '',      //二级分类id         subjectParentId:'', //一级分类id         teacherId: '',      //讲师id         lessonNum: 0,       //课时         description: '',    //课程简介         cover: '/static/01.jpg',          //默认封面图片         price: 0       },       teacherList:[],  //封装所有的讲师数据       subjectOneList:[],  //一级分类       subjectTwoList:[] ,  //二级分类       BASE_API: process.env.BASE_API // 接口API地址     }   },   created() { //页面渲染之前执行     //初始化所有讲师     this.getListTeacher()     //初始化一级分类     this.getOneSubject()   },   methods: {     //点击某个一级分类，会触发change事件，显示对应的二级分类     subjectLevelOneChanged(value){         //value就是一级分类的id值         //先遍历所有的分类 里面包含一级和二级       for (var i = 0; i <this.subjectOneList.length; i++) {         //每个一级分类         var oneSubject=this.subjectOneList[i]         //判断：所有一级分类id和点击一级分类id是否一样         if(value===oneSubject.id){  //===即比较值 还要比较类型           //从一级分类中获取所有的二级分类           this.subjectTwoList=oneSubject.children           //把二级分类Id值清空           this.courseInfo.subjectId=''         }       }     },     //查询所有的一级分类     getOneSubject(){       subject.getSubjectList()       .then(response=>{         this.subjectOneList=response.data.list       })     }   } } </script>

主要思想就是在第一级下拉框发生单击事件的时候，我们拿到第一级下拉框的id值(这里你不一定是id值)，然后遍历包含所有数据的一级分类集合，找到和当前单击事件选中的一级分类id值相等的那个对象，然后把它的children属性(我的children在后端是个二级分类的集合)赋值给data属性里面的二级分类数组对象subjectTwoList即可。
我这里是后端一次性把所有数据都取到了，我在前端遍历解决的。当然，你也可以修改下单击事件的执行逻辑，还有一种方法是每单机一次，用单击选中的以及下拉框的键去后端查所有的二级分类，再将查到的二级分类赋值给第二个下拉框即可，但这样效率感觉有点慢，虽然这也是一种实现方式。

以上是“vue如何实现下拉框二级联动效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！