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

2022-07-02 11:57:25

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-itemlabel="课程分类"><!--一级分类--><el-selectv-model="courseInfo.subjectParentId"placeholder="一级分类"@change="subjectLevelOneChanged"><el-optionv-for="subject in subjectOneList":key="subject.id":label="subject.title":value="subject.id"/></el-select><!-- 二级分类 --><el-selectv-model="courseInfo.subjectId"placeholder="请选择"><el-optionv-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'exportdefault{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即可。
我这里是后端一次性把所有数据都取到了,我在前端遍历解决的。当然,你也可以修改下单击事件的执行逻辑,还有一种方法是每单机一次,用单击选中的以及下拉框的键去后端查所有的二级分类,再将查到的二级分类赋值给第二个下拉框即可,但这样效率感觉有点慢,虽然这也是一种实现方式。


  • 作者:别团等shy哥发育
  • 原文链接:https://blog.csdn.net/qq_43753724/article/details/121090837
    更新时间:2022-07-02 11:57:25