Vue中使用el-select下拉框实现省、市、县地区三级联动功能，并定义@change事件进行区域名称和对应编码的动态赋值

一、页面显示效果图和显示显示的代码，如下：

<!-- 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
    }
}

三、当数据库中既要保存省、市、县名称，同时也要保存对应省、市、县的编码时，以上方法适用！！！