基于vue实现省市区三级级联

html:

 

           

             

               

{{pro.region_name}}

             

             

               

{{city.region_name}}

             

             

                 

{{area.region_name}}

               

       

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

            }

          });

        }

      }

}

})

待更~~