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

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

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

1、存在select下拉框组，由“国家“、”省份”两个下拉框组成，组值为“国家-省份”
2、下拉框“国家”与“省份”存在级联关系
3、下拉框组可能存在一个或多个，必须实现动态增减
4、不允许重复的下拉框组，如出现了“中国-广东”，则后续下拉框，不应出现选项值“广东”，避免重复组值出现

效果如下图

实现思路如下：

1、前端下拉框组框架实现，即创建两个select
2、下拉框组数据绑定，即给select绑定数据，并实现级联
3、实现下拉框组的动态增减，即增加事件的实现下拉框组的增减
4、实现下拉框组数据的，即对下拉框组数据做筛选

具体实现

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

`
	<el-form :model="formInline">
        <div v-for="(area,index) in formInline.areas">
                <el-select v-model="area.region">
                    <el-option v-for="item in area.regions" :value="item.code" :label="item.sortName"/>
                </el-select>
            </el-form-item>
            <el-form-item label="省" >
                <el-select v-model="area.province" >
                    <el-option v-for="item in area.provinces" :label="item.sortName"/>
                </el-select>
            </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、下拉框组数据绑定，即给select绑定数据，并实现级联

对代码进行改进，具体如下
a、国家下拉框增加change事件 getCode(area.region,index)

<el-form :model="formInline">
        <div v-for="(area,index) in formInline.areas">
				<!--添加change事件-->
                <el-select v-model="area.region" @change="getCode(area.region,index)">
                    <el-option v-for="item in area.regions" :value="item.code" :label="item.sortName"/>
                </el-select>
            </el-form-item>
            <el-form-item label="省" >
                <el-select v-model="area.province" >
                    <el-option v-for="item in area.provinces" :label="item.sortName"/>
                </el-select>
            </el-form-item>
        </div>
        <div class="add">
            <i class="el-icon-circle-plus-outline" @click="addAreaQuota()"></i>
        </div>
    </el-form>

---------------------------------------------------------------------------------
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、实现下拉框组的动态增减，即增加事件的实现下拉框组的增减

<el-form :model="formInline">
        <div v-for="(area,index) in formInline.areas">
                <el-select v-model="area.region" @change="getCode(area.region,index)">
                    <el-option v-for="item in area.regions" :value="item.code" :label="item.sortName"/>
                </el-select>
            </el-form-item>
            <el-form-item label="省" >
                <el-select v-model="area.province" >
                    <el-option v-for="item in area.provinces" :label="item.sortName"/>
                </el-select>
            </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((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、实现下拉框组数据的，即对下拉框组数据做筛选

<el-form :model="formInline">
        <div v-for="(area,index) in formInline.areas">
                <el-select v-model="area.region" @change="getCode(area.region,index)">
                    <el-option v-for="item in area.regions" :value="item.code" :label="item.sortName"/>
                </el-select>
            </el-form-item>
            <el-form-item label="省" >
                <el-select v-model="area.province" >
					<!--添加显示隐藏逻辑，使用v-show-->
					<!--area.province==item.code 表示有初始值时，则显示该值，无初始值时使用下面规则-->
					<!--!formInline.areas.find(t=>t.province==item.code) 表示需要展示的数据不存在于已选列表-->
                    <el-option v-for="item in area.provinces"  v-show="area.province==item.code || !formInline.areas.find(t=>t.province==item.code)" :label="item.sortName"/>
                </el-select>
            </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>