vue 省市区三级联动
Posted cming
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 省市区三级联动相关的知识，希望对你有一定的参考价值。
<select class="myCenter_add_row-5" v-model="province" :v-bind="province" @change="citychange($event)">
<option v-for="i in provincelist" v-bind:value="i.id">{{i.name}}</option>
</select>
<select class="myCenter_add_row-5" v-model="city" @change="areachange($event)">
<option v-for="k in citylist" v-bind:value="k.id">{{k.name}}</option>
</select>
<select class="myCenter_add_row-5" v-model="area">
<option v-for="j in arealist" v-bind:value="j.id">{{j.name}}</option>
</select>
<!------------- html、结束------------->
province: "",
provincename: "",
provincelist: [],
city: "",
cityname: "",
citylist: [],
area: "",
areaname: "",
arealist: [],
<!------------- vue。js声明、结束------------->
this.$http("/psys-enter/enterpriseBase/selectCityByLevel",{}, 0,1)
.then(data => {
this.provincelist=data.data;
})
.catch(error => {
});
<!------------- 一次性请求数据、结束------------->
citychange: function() {
let that = this;
this.provincelist.forEach(function(i) {
if (i.id == that.province) {
that.provincename = i.name;
that.citylist = i.sub;
that.arealist = [];
}
});
},
areachange: function() {
let that = this;
this.citylist.forEach(function(i) {
if (i.id == that.city) {
that.arealist = i.sub;
that.cityname = i.name;
}
});
},
this.arealist.forEach(function(i){
if(that.area==i.id){
that.areaname=i.name
}
})
<!------------- js、结束------------->
以上是关于vue 省市区三级联动的主要内容，如果未能解决你的问题，请参考以下文章