省市区三级联动，史上最牛逼，基于element ，带注释

<template>
  <div class="addSelect">
    <el-select
      placeholder="请选择省"
      style="width:33%;"
      v-model="modelFiled.province"
      clearable
      filterable
      @change="getAddrData($event,'province')"
      ref="province"
    >
      <el-option
        v-for="(item,index) in addrList.province"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-select
      ref="city"
      placeholder="请选择市"
      style="width:33%;"
      @change="getAddrData($event,'city')"
      v-model="modelFiled.city"
      clearable
      filterable
    >
      <el-option
        v-for="(item,index) in addrList.city"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-select
      ref="area"
      placeholder="请选择区/县"
      style="width:33%;"
      v-model="modelFiled.area"
      clearable
      filterable
      @change="getAddrData($event,'area')"
    >
      <el-option
        v-for="(item,index) in addrList.area"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
//  import { addrData } from './addrData.js'  // 本地数据json
import { queryCityByLevel } from '@/api/common'  //远程数据接口

export default {

  data () {
    return {
      modelFiled: {
        province: '',
        provinceName: '',
        city: '',
        cityName: '',
        area: '',
        areaName: ''
      },
      addrList: {
        province: [],
        city: [],
        area: []
      },
      keyObj:{
        1:'province',
        2:'city',
        3:'area',
      }
    }
  },
  mounted () {
    this.getAddrData()
  },
  methods: {
    // 用于获取省市县
    async getAddrData (parentid, key) {

      // level:1是获取省，2是获取市，3是获取县
      let level = 1

      // === 联动数据初始化start ===
      if (key === 'province') {
        this.addrList.city = []
        this.modelFiled.city = ''
        this.modelFiled.provinceName = ''  // 防止是点击clear
        // this.$forceUpdate()
        level = 2
      }

      if (key === 'city') {
        
        level = 3
      }

      if (key !== 'area') {

        this.modelFiled.cityName = '' 
        // 不是县/区改变，都清空县的值，   
        this.modelFiled.area = ''
        this.addrList.area = []
      }

      this.modelFiled.areaName = ''
      // === 联动数据初始化end ===

      if (parentid) {
        this.modelFiled[key + 'Name'] = this.$refs[key].getOption(parentid).$options.propsData.label
      }

      this.$emit('addrChange', this.modelFiled)

      // 如果是县改变或者是点了清空都不请求数据
      if (key === 'area' || parentid === '')
        return
       
      // 获取下拉框数据
      const { data } = await queryCityByLevel(level, parentid)

      if (data.status === 0) {
         
        this.addrList[this.keyObj[level]] = data.data
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.addSelect {
  display: flex;
}
</style>