基于vue实现省市区三级级联
html:
<li>
<img src="../../image/add-address-icon3.png" alt="">
<select v-model="cur_pro" >
<option :value="pro.id" v-for="pro in province_data">{{pro.region_name}}</option>
</select>
<select name="city" v-model="cur_city" v-if="city_data">
<option :value="city.id" v-for="city in city_data">{{city.region_name}}</option>
</select>
<select name="area" v-model="cur_area" v-if="area_data">
<option :value="area.id" v-for="area in area_data">{{area.region_name}}</option>
</select>
</li>
js:
var vm=new Vue({
el:'#app',
data:{
province_data:[],
city_data:null,
cur_pro:0,
cur_city:0,
area_data:null,
cur_area:0
},
created:function(){
var that = this;
//请求省份数据
apiRequest('region/index', {}, function(res,err){
that.province_data = res.data;
that.cur_pro=that.cur_pro ? that.cur_pro : res.data[0].id;
apiRequest('region/index', {'parent_id':that.cur_pro}, function(res,err){
that.city_data = res.data;
that.cur_city = that.cur_city ? that.cur_city : res.data[0].id;
apiRequest('region/index', {'parent_id':that.cur_city}, function(res,err){
that.area_data = res.data;
that.cur_area = that.cur_area ? that.cur_area : res.data[0].id;
});
});
});
},
watch:{
//监听级联
cur_pro(){
var that = this;
apiRequest('region/index', {'parent_id':that.cur_pro}, function (res,err) {
that.city_data = res.data;
that.cur_city = res.data[0].id;//解决选中省份及城市后另选省份时城市显示非第一位的bug
});
},
cur_city(){
var that = this;
apiRequest('region/index', {'parent_id':that.cur_city}, function (res,err) {
that.area_data = res.data;
if(res.data.length!=0){
that.cur_area = res.data[0].id
}
});
}
}
}
})
待更~~
