vue循环后不能下滑_Vue-动态循环select实现不重复数据

Vue-动态循环select实现不重复数据

在实际使用过程中存在如下需求：

1、存在select下拉框组，由“国家“、”省份”两个下拉框组成，组值为“国家-省份”

2、下拉框“国家”与“省份”存在级联关系

3、下拉框组可能存在一个或多个，必须实现动态增减

4、不允许重复的下拉框组，如出现了“中国-广东”，则后续下拉框，不应出现选项值“广东”，避免重复组值出现

效果如下图

实现思路如下：

1、前端下拉框组框架实现，即创建两个select

2、下拉框组数据绑定，即给select绑定数据，并实现级联

3、实现下拉框组的动态增减，即增加事件的实现下拉框组的增减

4、实现下拉框组数据的，即对下拉框组数据做筛选

具体实现

1、 前端下拉框组框架实现，即创建两个select

`

`

说明：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、下拉框组数据绑定，即给select绑定数据，并实现级联

对代码进行改进，具体如下

a、国家下拉框增加change事件 getCode(area.region,index)

---------------------------------------------------------------------------------

getCode(area.region,index)实现如下

//省级联动方法

getCode(code,index) {

this.$fetchNo(GetProvinveUrl, { parentCode: code }).then((response) => {

if (response.status == 1000) {

//response.data返回指定国家的省份数据格式如下

//[{code:"xxxxxx",sortName:"广东"},{code:"xxxxxx",sortName:"北京"}]

this.formInline.areas[index].provinces = response.data;

}

}, err => {

this.$message.error(err);

});

}

3、实现下拉框组的动态增减，即增加事件的实现下拉框组的增减

--------------------------------------------

deleteAreaQuota实现如下

deleteAreaQuota(item, index) {

this.formInline.areas.splice(index, 1);

}

++++++++++++++++++++++++++++++++++++++++++++++

addAreaQuota实现如下

addAreaQuota(){

that.$fetchNo(GETREGIONUrl, formData).then((response) => {

if (response.status == 1000) {

var data = {

region: "156000000000",//默认中国

regions: response.data.countries,//国家列表

province: "", //省份

provinces: response.data.provinces //省份列表，默认是中国的省份

};

that.formInline.areas.push(data);

} else {

this.$message.error(response.message);

}

}, err => {

this.$message.error(err);

});

}

4、实现下拉框组数据的，即对下拉框组数据做筛选