vue二级联动下拉菜单,vue三级联动下拉列表怎么实现
这篇文章主要介绍了某视频剪辑软件实现下拉框二级联动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1、实现效果
2、后端返回的数据格式
列表:[
{
id: 1178214681118568449 ，
标题: 后端开发，
儿童:[
{
id: 1178214681139539969 ，
标题： Java
},
{
id: 1178585108407984130 ，
标题：“Python”
},
{
id: 1454645056483913730 ，
标题： C
},
{
id: 1454645056731377666 ，
标题： C#
}
]
},
{
id: 1178214681181483010 ，
标题: 前端开发，
儿童:[
{
id: 1178214681210843137 ，
标题： JavaScript
},
{
id: 1178585108454121473 ，
标题： HTML/CSS
}
]
},
{
id: 1178214681231814658 ，
标题: 云计算，
儿童:[
{
id: 1178214681252786178 ，
标题:码头工人
},
{
id: 1178214681294729217 ，
标题：“Linux”
}
]
},
{
id: 1178214681324089345 ，
标题: 系统/运维，
儿童:[
{
id: 1178214681353449473 ，
标题：“Linux”
},
{
id: 1178214681382809602 ，
标题:视窗
}
]
},
{
id: 1178214681399586817 ，
标题: 数据库，
儿童:[
{
id: 1178214681428946945 ，
标题：“MySQL”
},
{
id: 1178214681454112770 ，
标题： MongoDB
}
]
},
{
id: 1178214681483472898 ，
标题: 大数据，
儿童:[
{
id: 1178214681504444418 ，
标题：“Hadoop”
},
{
id: 1178214681529610242 ，
标题:火花
}
]
},
{
id: 1178214681554776066 ，
标题: 人工智能，
儿童:[
{
id: 1178214681584136193 ，
标题：“Python”
}
]
},
{
id: 1178214681613496321 ，
标题: 编程语言，
儿童:[
{
id: 1178214681626079234 ，
标题： Java
}
]
}
]
数据格式不一定和上面的一样，我上一篇文章是把这个数据格式用在了树形控件上面，这里放在二级联动上面。
3、vue页面中
！-所属分类待办事项-
El-表单-项目标签=课程分类
！-一级分类-
埃尔-选择
v-model=课程信息。主题parentid
占位符=一级分类@ change= subjectLevelOneChanged
埃尔选项
v-for=科目一列表中的主题
:key=subject.id
:label=subject.title
:value=subject.id/
/el-select
！-二级分类-
El-select v-model=课程信息。subjectid placeholder=请选择
埃尔选项
v-for= subjectTwoList中的主题
:key=subject.value
:label=subject.title
:value=subject.id/
/el-select
/El-表单-项目
从" @/API/edu/课程"导入课程
从" @/API/edu/主题"导入主题
导出默认值{
data() {
返回{
saveBtnDisabled: false，//保存按钮是否禁用
课程信息：{
标题： ,
主题Id: ，///二级分类id
SubjectParentId: ，//一级分类Id
教师Id: ，//教师id
LessonNum: 0，//课时
描述： ，//课程介绍
封面：“/static/01.jpg”，//默认封面图像
价格：0
},
教师列表：[]，//封装所有教师数据。
SubjectOneList:[]，//一级分类
SubjectTwoList:[]，///二级分类
base _ API:process . env . base _ API//接口API地址
}
},
Created() {//在呈现页面之前执行
//初始化所有讲师
this.getListTeacher()
//初始化一级分类
this.getOneSubject()
},
方法：{
//点击一个一级分类，会触发change事件，显示对应的二级分类。
subjectLevelOneChanged(值){
//value是一级分类的id值。
//先遍历所有分类，包括一级和二级。
for(var I=0；I this . subjectonelist . length；i ) {
//每个一级分类
var one subject=this . subject one list[I]
//判断：是否所有一级分类ID都与点击一级分类ID相同。
if(value===one subject . id){//===即比较值和类型。
//从一级分类中获取所有二级分类
this . subjecttwolist=one subject . children
//清空二级分类Id值
this.courseInfo.subjectId=
}
}
},
//查询所有一级分类
getOneSubject(){
subject.getSubjectList()。然后(response={
this . subject one list=response . data . list
})
}
}
}
/脚本
主要思想是，当一级下拉框发生click事件时，我们获取一级下拉框的id值(这里你不一定是id值)，然后遍历包含所有数据的一级分类集合，找到id值等于当前click事件选中的一级分类的对象，然后将它的children属性(我的children是后端的二级分类集合)赋给data属性中二级分类数组的object subjectTwoList。
在这里，我在后端一次性得到所有数据，我在前端遍历它。当然，你也可以修改下一个点击事件的执行逻辑。另一种方法是每台机器点击一次选中的键和下拉框，在后端检查所有的二级分类，然后将找到的二级分类赋给第二个下拉框。不过这个效率感觉有点慢，虽然这也是一种实现方法。
关于vue实现下拉框两级联动效果的这篇文章到此为止。更多相关vue下拉框二级联动内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。