欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-06 18:03:46
...

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

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

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

效果如下图

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

实现思路如下:

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>
相关标签: Vue