1，项目结构

2，项目运行图

3，About.vue

    1,html部分

  <div>
    <div class="select_box">
      <div class="item">
        <el-select
          v-model="pname"
          placeholder="选择省"
          clearable
          @change="choseProvince"
        >
          <el-option
            v-for="(item, $index) in province"
            :key="$index"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="item">
        <el-select
          v-model="cname"
          placeholder="选择市"
          clearable
          @change="choseCity"
        >
          <el-option
            v-for="(item, $index) in city"
            :key="$index"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="item">
        <el-select
          v-model="bname"
          placeholder="选择区"
          clearable
          @change="choseBlock"
        >
          <el-option
            v-for="(item, $index) in block"
            :key="$index"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
  </div>

2，js部分

<script>
import ChineseDistricts from "./app.js";  //引用地址组件
export default {
  data() {
    return {
      ChineseDistricts: ChineseDistricts,
      province: [],
      city: [],
      block:[],
      pname: "", // 省的名字
      cname: "", // 市的名字
      bname: "", // 区的名字
    };
  },
  created: function () {
    this.getCityData();
  },
  methods: {
    // 加载china地点数据，三级
    getCityData: function () {
      this.ChineseDistricts.forEach((item, index) => {
        // 省级数据
        this.province.push({
          id: item.code,
          value: item.name,
          children: item.cityList,
        });
      });
    },
    choseProvince: function (e) {
      this.city = []; //市
      this.block = []
      this.cname = ''
      this.bname = ''
      this.province.forEach(item=>{
        if(e === item.id){
          let arr = item.children
          this.pname = item.value
          arr.forEach(items=>{
            console.log(items,'5555')
            this.city.push({
              id:items.code,
              value:items.name,
              areaList:items.areaList
            })
          })
        }
      })
    },
    choseCity: function (e) {
     this.block = [] //区
     this.bname = ''
     this.city.forEach(item=>{
       if(e === item.id){
         let areaList = item.areaList
         this.cname = item.value
         areaList.forEach(items=>{
           this.block.push({
             id:items.code,
             value:items.name
           })
         })
       }
     })
    }, // 选区
    choseBlock: function (e) {
      this.block.forEach(item=>{
        if(e === item.id){
          // this.bname = item.value
        }
      })
    },
    reset() { //重置
      this.pname = ""; // 省的名字
      this.cname = ""; // 市的名字
      this.bname = ""; // 区的名字
      this.city = [];
      this.block = [];
    },
  },
};
</script>

3，css样式

<style scoped>
.select_box {
  display: flex;
  align-items: center;
}
.item {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.label_title {
   padding-right: 5px;
   display: inline-block;
   width: 52px;
   font-weight: 500;
  }
.lable_right {
  display: inline-block;
  padding-left: 6px;
  font-weight: 500;
}
</style>

5，vue基于element-ui库所写的三级地址组件供大家参考

    运行环境依赖node.js

             运行命令：npm run dev

             打包命令：npm run build