效果:
页面有下拉框A和B,
A、B的初始下拉框是所有的A和所有的B,
当A中选中A.X的时候,B中下拉框的内容更新为A.X对应的所有的B,
当B中选中B.X的时候,A中下拉框中的内容是所有的B.X对应的所有的A,
另外,当A或B中的内容被清空时,另外一个下拉框中的选项回复初始值,即所有的选项
表单部分:
——在el-select里面使用@change调用changeANameList不生效
更改为 在el-option里面使用@click.native调用
——使用@clear,实现下拉框内容被清除后,两个下拉框中选项恢复初始值
<el-form-item label="A名称" prop="aName">
<el-select v-model="queryParam.nameA" remote :remote-method="initAName" placeholder="" style="width: 100%;" clearable @clear="changeANameList('')" >
<el-option
v-for="item in aOptions"
:key="item.value"
:label="item.label"
:value="item.value"
@click.native="changeANameList(item.key)">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="B" prop="bName">
<el-select v-model="queryParam.bName" remote :remote-method="initbNmame" placeholder="" style="width: 100%;" clearable @clear="changebNameList('')">
<el-option
v-for="item in bNameOptions"
:key="item.value"
:label="item.label"
:value="item.value"
@click.native="changebNameList(item.key)">
</el-option>
</el-select>
</el-form-item>
</el-col>
调用的方法:initAName和initBName看具体的项目,考虑是在mounted里面调用还是在弹窗打开(open方法)的时候调用,或者两个都调用,目的是给两个下拉框赋初始值
目前项目状态:
mounted中不调用会出现弹窗打开下拉框内容为空
open中不调用会出现:每次打开弹窗下拉框A B中内容是空的,但下拉框选项是上一次的AB对应的
initAName(name){
let param={}
if(!name){
param={bName:''}
}else{
param={bName:name}
}
//调用接口,注意接口传的是B的值,返回的是A的内容
findAName(param).then(
res=>{
this.aOptions = (res.data || []).map((item) => {
return {
value: item,
label: item,
};
});
}
)},
initBName(name){
let param={}
if(!name){
param={aName:''}
}else{
param={aName:name}
}
//调用接口,注意接口传的是A的值,返回的是B的内容
findBName(param).then(
res=>{
this.bNameOptions = (res.data || []).map((item) => {
return {
value: item,
label: item,
};
});
}
)},
changeANameList(e){
//当下拉框A中的值改变,B中的内容要更新
this.initbNmame(this.queryParam.aName)
},
changeBNameList(e){
//当下拉框B中的值改变,A中的内容要更新
this.initAName(this.queryParam.bName)
},