vue一个下拉框联动另一个下拉框,vue二级联动下拉菜单
本文主要介绍vue下拉框实现联动的双向联动效果。大家都知道，在Vue的页面中，如果要动态改变多个el-select下拉框的值，就必须调用@change函数。跟边肖学习具体的操作方法。
一、前言
开发前端页面时，经常需要写下拉框。常见的下拉框包括页面上写有固定值的下拉框，以及通过调用后端接口服务获得的值列表。无论是原jsp页面，html页面等。或者流行的vue angluar.js等。逻辑是一样的。本文阐述了VUE页面中多个下拉框如何实现双向链接的效果。
二、代码示例
2.1在vue页面的el-form表单中填写两个el-col :span=12 选项，分别为选项A和选项B，如下图所示：
el-col :span=12
El-form-item label= option A prop= A
El-select style= width:100%；@change=changeAList($event)
v型=温度。一个
可滤过的
遥远的
可清除的
Placeholder=请选择
:remote-method= get method
:loading=loading
el选项
v-for= ListA中的项目
:key=item.value
:label=item.value
:value=item.label
/el选项
/el-select
/El-表单-项目
/el-col
el-col :md=12
El-form-item label= option B prop= B
El-select style= width:100%；@change=changeBList($event)
v型=温度。 b
可滤过的
遥远的
可清除的
Placeholder=请选择
:remote-method=getBMethod
:loading=loading
el选项
v-for= ListB中的项目
:key=item.value
:label=item.value
:value=item.label
/el选项
/el-select
/El-表单-项目
/el-col
2.2在数据返回模块中定义两个列表集，加载选项a和选项B的数据列表集.
data() {
返回{
ListA: []，
列表B: []，
}
2.3在methods: methods区域定义下拉框选项，加载从后台接口服务获取的方法。get method用于加载选项a下拉框的内容，GetBMethod用于加载选项B下拉框的内容.
get method(temp){
XXAPI.getAValue(临时)。然后(response={
if(response . data response . status==200){
这个。ListA=[]
var result=response . data . data . xx
设jsonObj=JSON.parse(结果)；
for(let k of object . keys(JSON obj)){
这个。ListA.push(
{
标签:k，
值：jsonObj[k]。属性A，
}
)
}
}
})
},
getBMethod(temp) {
XXAPI.getDicValue2(临时)。然后(response={
if(response . data response . status==200){
这个。ListB=[]
var result=response . data . data . xx
设jsonObj=JSON.parse(结果)；
for(let k of object . keys(JSON obj)){
这个。ListB。推送(
{
标签:k，
值：jsonObj[k]。属性B，
}
)
}
}
})
},
以上步骤只是完成了基本的框架搭建，也就是说后台和前端数据采集加载和接口服务调用获取数据采集等。
2.4实现联动。大家都知道，在vue的页面中，如果要动态改变多个el-select下拉框的值，就必须调用@change函数。也就是图1中标记的内容：
@change=changeAList($event)和@ change= changelist ($ event)
通过这两种方法，可以实现两个下拉框的双向联动效果。
同样，在方法：方法区域中定义方法：
变更列表(e){
this.indexSelectB(e)
},
变革主义者
this.indexSelectA(e)
},
索引选择B(e){
如果(这个。ListA==undefined 这个。利斯塔。长度=0){
this . geta method(this . temp)；
}
设I=0；
for(I=0；这是。利斯塔。长度；i ) {
如果(这个。ListA [i]。label==e){
this.temp.A=this。ListA [i]。价值；
破裂
}
}
},
indexSelectA(e){
如果(这个。ListB==undefined 这个。ListB.length=0){
this . getb method(this . temp)；
}
设I=0；
for(I=0；这是。ListB.lengthi ) {
如果(这个。列表B[i]。label==e){
this.temp.B=this。列表B[i]。价值；
破裂
}
}
}
以上方法可以实现选项A和选项B下拉框的双向联动。但是，有一个小缺陷。你必须先输入字符，然后才能加载数据。
这是因为创建页面时不会加载背景数据。达到这个效果也很简单。您只需要调用两个方法来在创建的模块中加载后台接口服务，如下所示：
已创建(){
.
this . geta method(this . temp)；
this . getb method(this . temp)；
.
},
关于Vue下拉框双向联动的这篇文章到此为止。更多关于Vue下拉框双向联动的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。