vue省市县三级联动，element-ui城市联动查询

效果图：

---

 ***.vue模板

<template>
  <div class="base-main">
    <el-button type="permary" @click="showcity">查看联动信息</el-button>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所在地区">
        <el-select
          v-model="provinceCode"
          placeholder="请选择省"
          :disabled="disabled"
          @change="getProvince()"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.provinceCode"
            :label="item.areaName"
            :value="item.provinceCode"
          ></el-option>
        </el-select>

        <el-select v-model="cityCode" placeholder="请选择市" :disabled="disabled" @change="getCity">
          <el-option
            v-for="item in cityList"
            :key="item.cityCode"
            :label="item.cityName"
            :value="item.cityCode"
            @change="getCity()"
          ></el-option>
        </el-select>
        <el-select
          v-model="countryCode"
          placeholder="请选择县/区"
          :disabled="disabled"
          @change="getArea"
        >
          <el-option
            v-for="item in countryList"
            :key="item.countryCode"
            :label="item.countryName"
            :value="item.countryCode"
          ></el-option>
        </el-select>
      <el-form-item>
        <el-button type="primary" @click="onChange" :class="[activeClass]">修改信息</el-button>
        <el-button type="primary" @click="onSub" :class="[disactiveClass]">确定</el-button>
        <el-button type="warning" @click="onCan" :class="[disactiveClass]">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { queryInformation, updateInformation } from "../../api/api";
import city from "../../api/city.json";
export default {
  data() {
    return {
      form: {},
      //预留校验部分

      //记录省市县
      provinceList: [],
      dataprovinceList: [],
      provinceCode: "",

      cityList: [],
      datacityList: [],
      cityCode: "",

      countryList: [],
      datacountryList: [],
      countryCode: "",

      //是否可以编辑
      disabled: true,
      activeClass: "active",
      disactiveClass: "disactive"
    };
  },
  methods: {
    onChange() {
      this.disabled = false;
      this.activeClass = "disactive";
      this.disactiveClass = "active";
    },
    onSub() {
      var con = confirm("确定修改吗？");
      if (con == true) {
        this.disabled = true;
        this.activeClass = "active";
        this.disactiveClass = "disactive";
        let _this = this;
        let infoParams = this.form;
        updateInformation(infoParams).then(data => {
          let { msg, code, result } = data;
          let getcode = parseInt(code);
          if (getcode == 0) {
            //console.log(this.form);
            this.getSchoolInfo();
          } else {
            this.$message({
              message: msg,
              code: getcode,
              type: "error"
            });
          }
        });
      } else {
        return;
      }
    },
    onCan() {
      this.disabled = true;
      this.activeClass = "active";
      this.disactiveClass = "disactive";
    },
    showcity() {
      //let cityArr=JSON.parse(city);
      //console.log(city);
      let _this = this;
      var provinceArr = [];
      var cityArr = [];
      var countryArr = [];
      for (let i = 0; city.length > i; i++) {
        //循环获取省级单位
        for (var key in city[i]) {
          let provinceCode = city[i].areaId;
          let areaName = city[i].areaName;
          var cities = city[i].cities;
          var pro = { provinceCode, areaName };
        }
        //循环获取市级单位
        for (var j = 0; cities.length > j; j++) {
          let cityName = cities[j].areaName;
          let cityCode = cities[j].areaId;
          var counties = cities[j].counties;
          var citiesres = { cityName, cityCode };
          cityArr.push(citiesres);
          //循环获取县级单位
          for (var n = 0; counties.length > n; n++) {
            let countryName = counties[n].areaName;
            let countryCode = counties[n].areaId;
            var countiesres = { countryName, countryCode };
            countryArr.push(countiesres);
          }
          //console.log(countiesres);
        }

        provinceArr.push(pro);
      }
      this.provinceList = provinceArr;
      this.cityList = cityArr;
      this.countryList = countryArr;
      this.dataprovinceList = provinceArr;
      this.datacityList = cityArr;
      this.datacountryList = countryArr;
      //console.log(this.cityList);
      //console.log(this.cityArr);
      //console.log(this.countryList);
    },
    //省和市的联动,根据市/100的整数商进行遍历
    getProvince() {
      let _this = this;
      //console.log(this.provinceCode)
      this.cityList = this.datacityList;
      if (this.provinceCode != 0) {
        let cArray = this.cityList;
        let cArrres = [];
        console.log(cArray);
        for (var i = 0; cArray.length > i; i++) {
          if (parseInt(cArray[i].cityCode / 100) == this.provinceCode) {
            cArrres.push(cArray[i]);
          } else {
          };
        }
        this.cityList = cArrres;
        this.cityCode=this.cityList[0].cityCode;
        //回调自动获取当前选择的县区
        this.getCity();
      }
      console.log("省："+this.provinceCode+"市："+this.cityCode+"县："+this.countryCode)
    },
    //市县联动
    getCity() {
      let _this=this;
      this.countryList=this.datacountryList;
      if (this.cityCode != 0) {
        let cArray = this.countryList;
        let cArrres = [];
        console.log(cArray);
        for (var i = 0; cArray.length > i; i++) {
          if (parseInt(cArray[i].countryCode / 100) == this.cityCode) {
            cArrres.push(cArray[i]);
          } else {
          };
        }
        this.countryList = cArrres;
        this.countryCode=this.countryList[0].countryCode;
      }
    },
    getArea() {
      console.log(this.countryCode)
    },
    //获取学校基本信息
    getSchoolInfo() {
      let _this = this;
      let schoolCode = "";
      let schoolCodeParams = { schoolCode };
      //console.log(schoolCodeParams);
      queryInformation(schoolCodeParams).then(data => {
        let { msg, code, result } = data;
        let getcode = parseInt(code);
        if (getcode == 0) {
          //console.log(result);
          this.form = result;
          this.provinceCode = result.schoolProvince;
          this.cityCode = result.schoolCity;
          this.countryCode = result.schoolArea;
          //console.log(this.form);
          this.getSchoolInfo();
        } else {
          this.$message({
            message: msg,
            code: getcode,
            type: "error"
          });
        }
      });
    }
  },
  mounted() {
    this.showcity();
    this.getSchoolInfo();
    
  }
};
</script>
<style lang="scss" scoped>
.disactive {
  display: none;
}
.active {
  display: block;
}

.base-main {
  width: 840px;
  height: 100%;
  margin: 15px;
}
.el-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}
.headerimg {
  background: url("../../assets/base_bg.jpg") no-repeat;
  width: 800px;
  height: 240px;
  padding-bottom: 20px;
  opacity: 30%;
  text-align: center;
  img {
    width: 140px;
    height: 140px;
    z-index: 999;
    border: 5px #ffffff solid;
    border-radius: 100px;
    margin: 20px 0 0 0;
  }
  p {
    color: #fff;
    font-size: 14px;
  }
}
.schoolpictitle {
  width: 78px;
  color: #48576a;
  float: left;
  p {
    color: red;
  }
  img {
    margin-bottom: 20px;
  }
}
.schoolpic {
  padding-bottom: 20px;

  img {
    // margin: 0 auto;
    float: right;
    border-radius: 5px;
    width: 720px;
    height: 240px;
    padding-bottom: 20px;
  }
  ul {
    list-style: none;
  }
}
button {
  float: left;
}
</style>

city.json文件 

https://download.csdn.net/download/panderboy/12101157  文件下载