简单实现省市区三级联动

废话不多说直接上代码

<template>
  <div class="addSelect">
   <el-select
          clearable
          filterable
          v-model="modelFiled.provinceCode"
          @change="queryCityByLevelFn($event,2)"  
          placeholder="请选择省"
        >
          <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select
          clearable
          filterable
          v-model="modelFiled.cityCode"
          @change="queryCityByLevelFn($event,3)"  
          placeholder="请选择市"
        >
          <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select
          clearable
          filterable
          v-model="modelFiled.countyCode"
          placeholder="请选择区/县"
        >
          <el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
  </div>
</template>

<script>
//  import { addrData } from './addrData.js'  // 本地数据json
import { queryCityByLevel } from '@/api/common'  //远程数据接口
const levelNameMap = {
1:'province',
2:'city',
3:'county',
}
export default {
  data () {
    return {
      modelFiled: {
        provinceCode: '',
        cityCode: '',
        countyCode : '',
      },
      addrList: {
      province: [],
      city: [],
      county: [],
      } 
    }
  },
  created() {
    this.queryCityByLevelFn ()
  },
  methods: {
    // 用于获取省市县
   async queryCityByLevelFn (id = 100000, level = 1) {
        if (!id) {
          console.error('id不能为空')
          return
        }   
              
      // 获取省数据清除市县数据，获取市数据清除县数据，   
        if( level !=3){
         this.city =[]
         this.modelFiled.cityCode = null
        } 
        
      this.county = []
      // 请求后台省市区接口数据
      const { data } = await queryCityByLevel(level, id)
      if (data.status === 0) {
        const listName= levelNameMap[level] 
        this.addrList.[listName] = data.data
      }
    },

  }
}
</script>

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