vue 省市区三级联动

效果：

 应用情形：主要用作三级数据列表命名规则不统一时：如：

html: 

<el-select  v-model="addressForm.province" placeholder="请选择省份" style="width:200px" @change="provinceChange">
          <el-option
            v-for="item in provinceEntity"
            :key="item.regionCode"
            :label="item.provName"
            :value="item.regionCode">
          </el-option>
        </el-select>
        <el-select v-model="addressForm.city" placeholder="请选择市" @change="cityChange">         
          <el-option
            v-for="item in cityEntity.cityList"
            :key="item.regionCode"
            :label="item.cityName"
            :value="item.regionCode">
          </el-option>
        </el-select>
        <el-select v-model="addressForm.county" placeholder="请选择区">
          <el-option
            v-for="item in countyEntity.countyList"
            :key="item.regionCode"
            :label="item.countyName"
            :value="item.regionCode">
          </el-option>
        </el-select>

js: 

 cityChange(e){
    //  console.log('修改了市',e)
      this.addressForm.county = null  
      this.countyEntity = this.cityEntity.cityList.find((val,index,arr)=>{
          return val.regionCode == e
        })
       // console.log('对应的city数组',this.countyEntity)
    },
    provinceChange(e){
      // console.log('修改了省份',e)
      this.addressForm.city = null;
      this.addressForm.county = null   
      this.cityEntity = this.provinceEntity.find((val,index,arr)=>{
          return val.regionCode == e
        })
        // console.log('对应的city数组',this.cityEntity)   
    },