需要引入庫

element-ui
axios

效果圖

圖片.png

使用

</template>
 <div>
 <li_area_select v-model="defultAddress"></li_area_select>
  <div>{{defultAddress}}</div>
</div>
</template>
<script>
 import Li_area_select from "../components/li_area_select";
 export default{
  components: {
      Li_area_select
    },
  data(){
      return{
       //默認(rèn)值設(shè)置，可為空
        defultAddress:{
          sheng: '陜西省',
          shi: '',
          qu: '',
        },
      }
    },
}
</script>

組件在components目錄下li_area_select

<template>
  <div style="display: flex">
    <el-select  v-model="caddress.sheng" style="flex: 1;" placeholder="請選擇省份" size="small" @change="getCityData">
      <el-option
        v-for="item in addressArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname"
      >
      </el-option>
    </el-select>
    <el-select  v-model="caddress.shi" style="flex: 1;margin-left: 10px" placeholder="請選擇市區(qū)" size="small"
               @change="getAreaData">
      <el-option
        v-for="item in cityArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname">
      </el-option>
    </el-select>
    <el-select  v-model="caddress.qu" style="flex: 1;margin-left: 10px" placeholder="請選擇縣" size="small"
               @change="onAreaChanged">
      <el-option
        v-for="item in areaArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import axios from 'axios'
  // 使用說明：v-model時，必須傳帶有帶有省，市，區(qū)拼音的字段

  export default {
    name: "li_area_select",
    //通過 model 選項(xiàng)配置子組件接收的 prop 名以及派發(fā)的事件名
    model: {
      prop: 'caddress',
      event: 'change',
    },
    props: {
      caddress: {
        type: Object,
      },
    },
    data() {
      return {
        areaJson: '../static/json/address.json',
        addressArray: [],//所有數(shù)據(jù)
        cityArray: [],
        areaArray: [],
      }
    },
    created() {
      this.getAddressData();
    },
    methods: {
      getAddressData() {
        var that = this
        axios.get(that.areaJson).then(function (response) {
          if (response.status === 200) {
            //獲取地址
            that.addressArray = response.data.data;
            //默認(rèn)值賦值獲取城市數(shù)組
            if(that.caddress.sheng){
              for (let ad of that.addressArray) {
                if (ad.areaname === that.caddress.sheng) {
                  that.cityArray = ad.subarea;
                  //---
                  //默認(rèn)賦值獲取區(qū)域數(shù)組
                  if(that.caddress.shi){
                    for (let area of that.cityArray) {
                      if (area.areaname === that.caddress.shi) {
                        that.areaArray = area.subarea;
                        break;
                      }
                    }
                  }
                }
              }
            }
          }
        })
      },
      //選擇省份
      getCityData(val) {
        console.log("AAA",this.caddress);
        //清空市，和區(qū)
        this.caddress.shi='';
        this.caddress.qu='';
        this.$emit('change', this.caddress);//發(fā)送改變
        for (let ad of this.addressArray) {
          if (ad.areaname === val) {
            this.cityArray = ad.subarea;
            return
          }
        }
      },
      getAreaData(val) {
        console.log("BBB",this.caddress);
        //清空區(qū)
        this.caddress.qu='';
        this.$emit('change', this.caddress);//發(fā)送改變
        for (let area of this.cityArray) {
          if (area.areaname === val) {
            this.areaArray = area.subarea;
            return
          }
        }
      },
      //地區(qū)數(shù)據(jù)變動后
      onAreaChanged(val) {
        console.log("CCC",this.caddress);
        this.$emit('change', this.caddress);//發(fā)送改變
      }
    }
  }
</script>

<style scoped>

</style>

省市區(qū)數(shù)據(jù)在目錄static/json/address.json，下載鏈接
https://pan.baidu.com/s/1cwJCZgi2bcUPcyNsMpRKqQ
提取碼：alsg