在实际使用过程中存在如下需求：
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>