Vue-动态循环lect实现不重复数据Vue-动态循环lect实现不重复数据
在实际使⽤过程中存在如下需求：
1、存在lect下拉框组，由“国家“、”省份”两个下拉框组成，组值为“国家-省份”
2、下拉框“国家”与“省份”存在级联关系
3、下拉框组可能存在⼀个或多个，必须实现动态增减
4、不允许重复的下拉框组，如出现了“中国-⼴东”，则后续下拉框，不应出现选项值“⼴东”，避免重复组值出现
效果如下图
实现思路如下：
1、前端下拉框组框架实现，即创建两个lect
2、下拉框组数据绑定，即给lect绑定数据，并实现级联
3、实现下拉框组的动态增减，即增加事件的实现下拉框组的增减
4、实现下拉框组数据的，即对下拉框组数据做筛选
具体实现
别扭拼音
1、前端下拉框组框架实现，即创建两个lect
`
<el-form :model="formInline">
<div v-for="(area,index) in formInline.areas">
<el-lect v-model="ion">
<el-option v-for="item ions" :value="de" :label="item.sortName"/>
</el-lect>
</el-form-item>
<el-form-item label="省" >
<el-lect v-model="area.province" >
<el-option v-for="item in area.provinces" :label="item.sortName"/>
</el-lect>
</el-form-item>
</div>
<div class="add">
<i class="el-icon-circle-plus-outline" @click="addAreaQuota()"></i>
</div>
</el-form>
`
说明：formInline数据格式如下
formInline:{
areas:[
{
region:"xxxxxx"，//国家代码
regions:[
{code:"xxxxxx",sortName:"中国"},
{code:"xxxxxx",sortName:"⽇本"}
]
,
province:"xxxxx",//省份代码
provinces:[
{code:"xxxxxx",sortName:"⼴东"},
{code:"xxxxxx",sortName:"⼴西"}
]
}
]
}
-------------------------------------------
备注：formInline已定义在data中
data(){
return{
formInline：{}
}
}
2、下拉框组数据绑定，即给lect绑定数据，并实现级联
对代码进⾏改进，具体如下
a、国家下拉框增加change事件 ion,index)
<el-form :model="formInline">
<div v-for="(area,index) in formInline.areas">
<!--添加change事件-->
<el-lect v-model="ion" @change="ion,index)">
<el-option v-for="item ions" :value="de" :label="item.sortName"/> </el-lect>
</el-form-item>
<el-form-item label="省" >
<el-lect v-model="area.province" >
<el-option v-for="item in area.provinces" :label="item.sortName"/>
</el-lect>
</el-form-item>
</div>
<div class="add">
<i class="el-icon-circle-plus-outline" @click="addAreaQuota()"></i>
</div>
</el-form>
---------------------------------------------------------------------------------
ion,index)实现如下
//省级联动⽅法
getCode(code,index) {
this.$fetchNo(GetProvinveUrl, { parentCode: code }).then((respon) => {
if (respon.status == 1000) {
//respon.data返回指定国家的省份数据格式如下
//[{code:"xxxxxx",sortName:"⼴东"},{code:"xxxxxx",sortName:"北京"}]
this.formInline.areas[index].provinces = respon.data;
}
}, err => {
this.$(err);
});
}
血小板升高是怎么回事
3、实现下拉框组的动态增减，即增加事件的实现下拉框组的增减
<el-form :model="formInline">
锦鲤鱼苗
<div v-for="(area,index) in formInline.areas">
榔头
<el-lect v-model="ion" @change="ion,index)">
<el-option v-for="item ions" :value="de" :label="item.sortName"/> </el-lect>
</el-form-item>
<el-form-item label="省" >
<el-lect v-model="area.province" >
<el-option v-for="item in area.provinces" :label="item.sortName"/>
</el-lect>
</el-form-item>
<!--增加删除按钮-->
<el-form-item>
<i class="el-icon-delete" @click="deleteAreaQuota(area, index)"></i>
</el-form-item>
</div>
<!--增加删除按钮-->
<div class="add">
<i class="el-icon-circle-plus-outline" @click="addAreaQuota()"></i>
</div>
</el-form>
--------------------------------------------
deleteAreaQuota实现如下
deleteAreaQuota(item, index) {
this.formInline.areas.splice(index, 1);
}
喜欢的英语怎么说++++++++++++++++++++++++++++++++++++++++++++++
addAreaQuota实现如下
addAreaQuota(){
that.$fetchNo(GETREGIONUrl, formData).then((respon) => {
if (respon.status == 1000) {
var data = {
region: "156000000000",//默认中国
regions: untries,//国家列表
province: "", //省份
provinces: respon.data.provinces //省份列表，默认是中国的省份
};
that.formInline.areas.push(data);
自强图片} el {尤克里里教程
this.$(ssage);
}
}, err => {
this.$(err);
});
}
4、实现下拉框组数据的，即对下拉框组数据做筛选
<el-form :model="formInline">
<div v-for="(area,index) in formInline.areas">
<el-lect v-model="ion" @change="ion,index)">
<el-option v-for="item ions" :value="de" :label="item.sortName"/>
</el-lect>
</el-form-item>
<el-form-item label="省" >
<el-lect v-model="area.province" >
<!--添加显⽰隐藏逻辑，使⽤v-show-->
<!--area.province==de 表⽰有初始值时，则显⽰该值，⽆初始值时使⽤下⾯规则-->
<!--!formInline.areas.find(t=>t.province==de) 表⽰需要展⽰的数据不存在于已选列表-->
<el-option v-for="item in area.provinces" v-show="area.province==de || !formInline.areas.find(t=>t.province==de)" :label="item.sortName"/> </el-lect>
</el-form-item>
<!--增加删除按钮-->
<el-form-item>
<i class="el-icon-delete" @click="deleteAreaQuota(area, index)"></i>
</el-form-item>
</div>
<!--增加删除按钮-->
<div class="add">
杨逸韬
<i class="el-icon-circle-plus-outline" @click="addAreaQuota()"></i>
</div>
</el-form>
