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>