本文共 2820 字，大约阅读时间需要 9 分钟。

废话不说，直接上代码：

   
                                  
    所在地区                                  
                                        
                                         
                                       
                                      
                                          
                                           
                                       
                                      
                                          
                                           
                                       
                                    
   

js

先引入js三级联动import { mapdata } from "../../assets/js/map";data(){    return {      provinceList: [], // 省列表      cityOptions: [], // 市列表      originOptions: [], // 区列表    }},mounted(){this._getJsonData();},methods: {// 选择省    changeProvince(val) {      this.cityOptions = [];      this.getAllList.forEach(data => {        if (val == data.parent) {          this.cityOptions.push(data);        }      });      this.city_code = this.cityOptions[0].value;      this.changeCity(this.city_code);    },    // 选择市    changeCity(val) {      this.originOptions = [];      this.getAllList.forEach(data => {        if (val == data.parent) {          this.originOptions.push(data);        }      });      this.country_code = this.originOptions[0].value;      this.changeOrigin(this.country_code);    },    // 选择区    changeOrigin(val) {},    _getJsonData() {          this.getAllList = mapdata;          this.getAllList.forEach(data => {            if (!data.parent) {              this.provinceList.push(data);            }          });          if (this.$route.query.editData) {            this.editData = this.$route.query.editData;            this.linkman = this.editData.linkman;            this.contact = this.editData.contact;            this.address_detail = this.editData.address_detail;            this.default = this.editData.default;            if (this.default == 1) {              this.switchvalue = true;            } else {              this.switchvalue = false;            }            this.province_code = String(this.editData.province_code);            this.city_code = String(this.editData.city_code);            this.getAllList.forEach(data => {              if (this.province_code == data.parent) {                this.cityOptions.push(data);              }              if (this.city_code == data.parent) {                this.originOptions.push(data);              }            });            this.country_code = String(this.editData.country_code);            this.add_lat = this.editData.add_lat;            this.add_lon = this.editData.add_lon;            this.tolnglat = [this.add_lon, this.add_lat];          }                 },}

export const mapdata = [{

        "name": "北京市",

        "value": "110000"

    },

    {

        "name": "天津市",

        "value": "120000"

    }

]

转载地址：https://blog.csdn.net/weixin_45854395/article/details/107740696 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！