uniapp使用picker获取省市区

uniapp使用picker获取省市区

uniapp官方文档也有解释

    <view class="SiresContent">
        <view class="siresname">站点地址</view>
        <picker mode="region" :value="date" style="font-size: 30rpx; margin: 0 40rpx 0 0; color: #407bff"
          @change="bindTimeChange">
          <view class="uni-input" v-if="info.siteAddress">
            {{ info.siteAddress.provinceName }}
            {{ info.siteAddress.cityName }}
            {{ info.siteAddress.areaName }}
          </view>
          <view class="uni-input" v-else>{{ diqu }}</view>
        </picker>
      </view>

data(){
  return{
	    date: [],
	    diqu: '请选择省市区',
	    info:{
	         siteAddress: '',
	    }
 }
}
 methods: {
    // 获取省市区
    bindTimeChange(e) {
      console.log(e);
      let area = {
        provinceId: e.detail.code[0],
        provinceName: e.detail.value[0],
        cityId: e.detail.code[1],
        cityName: e.detail.value[1],
        areaId: e.detail.code[2],
        areaName: e.detail.value[2],
      };
      this.info.siteAddress = area;

      console.log('area1111111111', area);
    },
   }

效果图