vue省市区三级联动

vue省市区三级联动

下载省市区js并引入

链接: link.

// 引入js
import provice from "./area.js";

data里赋值全局变量

// 赋值
that.provArr = provice.provice;
data(){
 provArr: [],
 prov: "",
 cityArr: [],
 city: "",
 countryArr: [],
 country: "",
}

Html

 <!--省份选择-->
 <select id="prov" v-model="prov" @change="updateCity();updateDistrict()">
   <option v-for="(p,index) in provArr" :key="index">{{p.name}}</option>
 </select>

 <!--城市选择-->
 <select id="city" v-model="city" @change="updateDistrict()">
   <option v-for="(c,index) in cityArr" :key="index">{{c.name}}</option>
 </select>

 <!--县区选择-->
 <select id="country" v-model="country">
   <option v-for="(c,index) in countryArr" :key="index">{{c}}</option>
 </select>

js

 //更新市数据
 updateCity: function() {
   var that = this;
   for (let i = 0; i < that.provArr.length; i++) {
     if (this.provArr[i].name == that.prov) {
       that.cityArr = this.provArr[i].city;
     }
   }
   that.city = that.cityArr[0].name;
 },
 //更新市数据
 updateDistrict: function() {
   var that = this;
   for (let j = 0; j < that.cityArr.length; j++) {
     if (this.cityArr[j].name == that.city) {
       that.countryArr = that.cityArr[j].districtAndCounty;
     }
   }
   if (that.countryArr && that.countryArr.length > 0) {
     that.country = that.countryArr[0];
   } else {
     that.country = "";
   }

css

  select {
  width: 2.18rem;
  height: 0.7rem;
  color: #fff;
  font-size: 0.3rem;
  border: 0;
  background-color: transparent;
  outline: none;
}
#prov {
  position: absolute;
  bottom: 5.4rem;
  left: 0.72rem;
}
#city {
  position: absolute;
  bottom: 5.4rem;
  left: 3.22rem;
}
#country {
  position: absolute;
  bottom: 5.4rem;
  left: 5.66rem;
}

样式大家自己根据需求调节哦…大功告成