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);
...
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了validator自定义验证及易错点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
这段时间一直在弄vue，当然也遇到很多问题，这里就来跟大家分享一些注册自定义模板组件的心得 ,需要的朋友可以参考下2019-04-04
vue3项目typescript如何export引入(imported)的interface问题
这篇文章主要介绍了vue3项目typescript如何export引入(imported)的interface问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要为大家介绍了Vue.js中动态更改svg的相关属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue-品牌管理案例-指令和过滤器的相关知识，文中通过代码给大家介绍了过滤器的基本使用,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue打包部署到tomcat上页面空白资源加载不出来的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了vue+quasar使用递归实现动态多级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Vue-router 报错NavigationDuplicated的解决方法
这篇文章主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了Vue3为什么这么快,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
在elementui中Notification组件添加点击事件实例
这篇文章主要介绍了在elementui中Notification组件添加点击事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论