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>