VUE下拉框双向联动
原创不易，且行且珍惜”
01
—
前言
在开发前端页面的时候，常常需要写下拉框，普通常见的下拉框有在页面写死固定值的下拉框，有通过调用后台接口服务而获取的值列表等。无论是原始的jsp页面html页面等，还是现在流行的vue angluar.js等，逻辑都是一样。但是大多数时候我们只需要开发一个下拉框即可，本文讲解VUE页面中，通过实际案例场景讲解多个下拉框如何实现双向动态联动效果。
02
—
代码示例
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);
...
},03
—
总结
在一些业务场景中，两个或以上的下拉框的业务是关联的，选择其中一个下拉框A的值的时候，另一个下拉框B的值必须为与A是关联的值；也就是说选了A必须有B的选项，反过来同样的道理，选了B的值必须关联上A的值。可以理解为A和B的值在业务逻辑上已经绑定好了，用户的界面只是按业务需要选择哪一个。以此类推，当有2个以上的值需要动态加载并且关联选择时，这个功能同样适用。本文的讲解希望对使用VUE开发页面时，遇到多个下拉框动态联动选择场景的伙伴们带来一些帮助和启发。