vue三级联动加编码

废话不说，直接上代码：

                              

                                  所在地区
                                  
                                    
                                    
                                  
                                  
                                      
                                      
                                  
                                  
                                      
                                      
                                  
                                

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"

    }

]