今天这篇给大家分享的知识是“用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怎么写下拉框二级联动效果，具体过程是怎样”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery中slow表示什么，用法是怎样的

  jquery中slow的意思是“缓慢的”，slow属性值用于控制jquery动画效果的动画速度，当参数值设置了“slow”时，元素的动画过程中会缓慢的改变元素的属性，语法为“元素对象.元素动画方法("slow")”。

• JS私有类字段是什么样？如何理解私有类字段

  天我们主要来了解JS私有类字段，对于JS私有类字段不了解朋友，下文有示例供大家参考，对帮助大家了解JS私有类字段是什么有一定的帮助，另外本文还介绍了TypeScript私有修饰符，那么下面我们就一起来学习一下吧。

• Next.js使用用来做什么，具体是怎样的

  Next.js 是一个轻量级的 React 服务端渲染应用框架。文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧

• JS中怎么创建对象和属性，代码是什么

  在JavaScript中我们经常会因为工作原因创建对象和属性，但是也有许多人会好奇javaScript如何创建对象和属性，那么下面我们就一起去看看吧。

• 使用jquery怎样实现图片悬浮的效果？

  这篇文章给大家分享的是jquery怎样实现图片悬浮的效果的内容，图片悬浮是一个比较常见的图片展示效果，也就是点击小图，然后悬浮展现的大图的一个效果，小编觉得挺实用的，因此分享给大家做个参考，感兴趣的朋友一起跟随小编看看吧。