vue实现省市区三级联动,借助vant-Area组件

vue实现省市区三级联动,借助vant-Area组件

 <!-- html -->
<div>
     <van-area title="标题" :area-list="areaList" @change="change" @confirm="sure" @cancel="cancel"/>
</div>

//首先要知道vant-Area组件的渲染数据格式如下
{
  province_list: {
    110000: '北京市',
    120000: '天津市'
  },
  city_list: {
    110100: '北京市',
    110200: '县',
    120100: '天津市',
    120200: '县'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    110105: '朝阳区',
    110106: '丰台区'
    120101: '和平区',
    120102: '河东区',
    120103: '河西区',
    120104: '南开区',
    120105: '河北区',
    // ....
  }
}

//模拟创建
// 城市列表
   areaList: {
        province_list: {},
        city_list: {},
        county_list: {}
    },
//
 provinceId: "110000", //省id.默认写北京的
 cityId: "110100", //市id.默认写北京的

//获取后台返回的数据并且改为vant支持渲染的格式
 // 获取地址
    getData() {
      let token = localStorage.getItem("token");
      return province(token).then(res => {
          //转换数据格式
        let obj = {};
        res.data.data.forEach(res => {
          obj[res.id] = res.area_name;
        });
         //将获取到的省的对象列表赋值给本地
        this.areaList.province_list = obj;
		
        return city(token, this.provinceId).then(res => {
            //转换数据格式
          let obj1 = {};
          res.data.data.forEach(res => {
            obj1[res.id] = res.area_name;
          });
             //将获取到的市的对象列表赋值给本地
          this.areaList.city_list = obj1;

          return district(token, this.cityId).then(res => {
              //转换数据格式
            let obj3 = {};
            res.data.data.forEach(res => {
              obj3[res.id] = res.area_name;
            });
                //将获取到的区的对象列表赋值给本地
            this.areaList.county_list = obj3;
          });
        });
      });
    },

//vant滑动事件
 // 地址滑动
    change(e, value, index) {
        //e节点,value返回显示的省市区字符串数组,index返回列的下标记,省:0,市:1,区:2
      let token = localStorage.getItem("token");
      if (index == 0) {
          //当省滑动时
          //仔细输出一下value,就会理解下面的参数格式
        return city(token, value[index].code).then(res => {
            //转换数据格式
          let obj1 = {};
          res.data.data.forEach(res => {
            obj1[res.id] = res.area_name;
          });
             //将获取到的市的对象列表赋值给本地
          this.areaList.city_list = obj1;
          return district(token, res.data.data[0].id).then(res => {
                //转换数据格式
            let obj3 = {};
            res.data.data.forEach(res => {
              obj3[res.id] = res.area_name;
            });
              //将获取到的区的对象列表赋值给本地
            this.areaList.county_list = obj3;
          });
        });
      } else if (index == 1) {
           //当市滑动时
        return district(token, value[1].code).then(res => {
           //转换数据格式
          let obj3 = {};
          res.data.data.forEach(res => {
            obj3[res.id] = res.area_name;
          });
            //将获取到的区的对象列表赋值给本地
          this.areaList.county_list = obj3;
        });
      }
    },