一、页面显示效果图和显示显示的代码,如下:
<!-- provinceNameList:所有省份集合 provinceId:省份编码 provinceName:省份名称 -->
<!-- fnclIvt:按需求定义传后台的实体类 belongAreaName:保存provinceName的字段 -->
<!-- provinceNameList: 定义的省份集合 -->
<!-- cityNameList: 定义的城市集合集合 -->
<!-- countyNameList: 定义的乡镇集合集合 -->
<el-form-item label="所在地区" prop="region" class="city-select">
<el-select v-model="fnclIvt.belongAreaName" placeholder="请选择所在省份"
@change="changeProvinceName">
<el-option
v-for="item in provinceNameList"
:key="item.provinceId"
:label="item.provinceName"
:value="item.provinceId">
</el-option>
</el-select>
<el-select v-model="fnclIvt.ivtStr2" placeholder="请选择所在市区"
@change="changeCityName">
<el-option
v-for="item in cityNameList"
:key="item.cityId"
:label="item.cityName"
:value="item.cityId">
</el-option>
</el-select>
<el-select v-model="fnclIvt.ivtStr4" placeholder="请选择所在县级"
@change="changeCountyName">
<el-option
v-for="item in countyNameList"
:key="item.countyId"
:label="item.countyName"
:value="item.countyId">
</el-option>
</el-select>
</el-form-item>
二、下拉框中定义@change事件,目的有二:a.通过下拉框选择事件,及时给名称和对应的编码进行动态赋值;b.通过选择事件,实现地区三级联动,比如:你选择某个确定市之后(武汉市),县级下拉框的数据将是武汉市的下级区县,@change事件对应代码如下,是在methods中定义的:
methods: {
//省份选择事件
changeProvinceName(provinceId){
let provinceObj = {}
//这里的provinceNameList就是上面遍历的后台查出的省份集合
provinceObj = this.provinceNameList.find((item)=>{
//筛选出匹配数据
return item.provinceId === provinceId
})
//我这边的belongAreaName就是对应provinceName
this.fnclIvt.belongAreaCode = provinceId
this.fnclIvt.belongAreaName = provinceObj.provinceName
//选择完省份后,调取后台方法,查询出该省份下所有的市
selectSuitedAdrress(this.fnclIvt.belongAreaCode, "", "").then(res =>{
if(res.msg == "successList"){
//给城市集合重新赋值
this.cityNameList = res.data
}
})
},
//城市选择事件
changeCityName(cityId){
let cityObj = {}
//这里的cityNameList就是上面遍历的后台查出的城市集合
cityObj = this.cityNameList.find((item)=>{
//筛选出匹配数据
return item.cityId === cityId
})
//我这边的ivtStr2就是对应cityName的
//赋值城市编码
this.fnclIvt.ivtStr1 = cityId
//赋值城市名称
this.fnclIvt.ivtStr2 = cityObj.cityName
//选择完城市后,调取后台方法,查询出该市下所有的区县
selectSuitedAdrress("", this.fnclIvt.ivtStr1, "").then(res =>{
if(res.msg == "successList"){
//给区县集合重新赋值
this.countyNameList = res.data
}
})
},
//乡镇选择事件
changeCountyName(countyId){
let countyObj = {}
//这里的countyNameList就是上面遍历的后台查出的区县集合
countyObj = this.countyNameList.find((item)=>{
//筛选出匹配数据
return item.countyId === countyId
})
//我这边的ivtStr4就是对应countyName的
//赋值乡镇编码
this.fnclIvt.ivtStr3 = countyId
//赋值乡镇名称
this.fnclIvt.ivtStr4 = countyObj.countyName
}
}
三、当数据库中既要保存省、市、县名称,同时也要保存对应省、市、县的编码时,以上方法适用!!!