VUE多个下拉框实现双向联动效果
本文实例为大家分享了VUE多个下拉框实现双向联动的具体代码，供大家参考，具体内容如下
一、前言
在开发前端页面的时候，常常需要写下拉框，普通常见的下拉框有在页面写死固定值的下拉框，有通过调用后台接口服务而获取的值列表等。无论是原始的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="选项A" prop="A"> <el-select style="width: 100%;" @change="changeAList($event)" v-model="temp.A" filterable remote clearable placeholder="请选择" :remote-method="getAMethod" :loading="loading"> <el-option v-for="item in ListA" :key="item.value" :label="item.value" :value="item.label"> </el-option> </el-select> </el-form-item> </el-col> <el-col :md="12" > <el-form-item label="选项B" prop="B"> <el-select style="width: 100%;" @change="changeBList($event)" v-model="temp.B" filterable remote clearable placeholder="请选择" :remote-method="getBMethod" :loading="loading"> <el-option v-for="item in ListB" :key="item.value" :label="item.value" :value="item.label"> </el-option> </el-select> </el-form-item> </el-col>
2.2 在data的return模块定义两个list集合，用于装载选项A和选项B的数据list集
data() {
return {
ListA: [],
ListB: [],
}
}2.3 在methods: 方法区定义下拉框选项加载从后台接口服务获取的方法。getAMethod用来加载A选项的下拉框内容。getBMethod用来加载B选项的下拉框内容。
getAMethod(temp) {
XXAPI.getAValue(temp)
.then(response => {
if(response.data && response.status == 200){
this.ListA= []
var result = response.data.data.XX
let jsonObj = JSON.parse(result);
for (let k of Object.keys(jsonObj)) {
this.ListA.push(
{
label: k,
value: jsonObj[k].属性A,
}
)
}
}
})
},
getBMethod(temp) {
XXAPI.getDicValue2(temp)
.then(response => {
if(response.data && response.status == 200){
this.ListB = []
var result = response.data.data.XX
let jsonObj = JSON.parse(result);
for (let k of Object.keys(jsonObj)) {
this.ListB .push(
{
label: k,
value: jsonObj[k].属性B,
}
)
}
}
})
},上述步骤仅完成基本的框架搭建，也就是说后台和前端的数据集合装载以及接口服务调用用以获取数据集合等。
2.4 实现联动，大家都知道在vue的页面中，想要实现多个<el-select 下拉框的值动态改变，必须要调用@change 函数。也就是图1中已经标注的：@change="changeAList($event) 和 @change="changeBList($event)
通过这2个方法即可实现两个下拉框的双向联动效果。
同样在methods:方法区定义方法：
changeBList(e){
this.indexSelectB(e)
},
changeAList(e){
this.indexSelectA(e)
},
indexSelectB(e){
if(this.ListA == undefined || this.ListA .length <= 0){
this.getAMethod(this.temp);
}
let i = 0;
for (i = 0;i<this.ListA .length;i++) {
if (this.ListA [i].label == e){
this.temp.A= this.ListA [i].value;
break
}
}
},
indexSelectA(e){
if(this.ListB == undefined || this.ListB.length <= 0){
this.getBMethod(this.temp);
}
let i = 0;
for (i = 0;i<this.ListB.length;i++) {
if (this.ListB[i].label == e){
this.temp.B= this.ListB[i].value;
break
}
}
}以上方法即可实现选项A和选项B两个下拉框的双向联动。但是有个小缺陷，必须要输入字符后才能加载出来数据。
这是因为没有在页面创建的时候，就把后台的数据load出来，实现这个效果也很简单，只需要在created模块中调用两个加载后台接口服务的方法即可，如下：
created() {
...
this.getAMethod(this.temp);
this.getBMethod(this.temp);
...
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue中使用axios post上传头像/图片并实时显示到页面的方法
今天小编就为大家分享一篇vue中使用axios post上传头像/图片并实时显示到页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
下面小编就为大家分享一篇改变vue请求过来的数据中的某一项值的方法(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03![vue文件代码缩进以及格式化代码方式[自定义]](//img.jbzj.com/images/xgimg/bcimg2.png)
这篇文章主要介绍了vue文件代码缩进以及格式化代码方式[自定义],具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了关于Vue入门的相关资料，是一篇超完整的Vue入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了解读resetFields()不生效的原因，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vscode中prettier和eslint换行缩进冲突的问题
这篇文章主要介绍了vscode中prettier和eslint换行缩进冲突的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了Vue 2中实现CustomRef方式防抖节流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue使用rem实现 移动端屏幕适配的相关知识，通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下2018-09-09
这篇文章主要为大家详细介绍了vue Echarts实现仪表盘案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了elementui el-calendar日历组件使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
![vue文件代码缩进以及格式化代码方式[自定义]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论