Vue配合Vant使用时area省市区选择器的使用方式

<div class="school-address">
      <van-cell is-link @click="showPopup" v-model="showAddr">
        校区地址
        <span class="showAddr">{{showAddr}}</span>
      </van-cell>
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '50%' ,padding:'16px'}"
      >
        <van-area
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          value="110000"
          title="选择地址"
          @change="changeAddr"
          @cancel="cancelChoose"
          @confirm="chooseThis"
        />
      </van-popup>
      <van-cell-group>
        <van-field
          v-model="detailAddress"
          rows="2"
          type="textarea"
          maxlength="100"
          placeholder="请输入详细地址"
          show-word-limit
        />
      </van-cell-group>
    </div>

import addressData from './../data/address'

export default {
    data () {
      return {
        show: false,  //是否显示弹出层
        detailAddress: '',  //绑定详细地址输入框
        areaList: addressData, //可选地址数据列表
        showAddr: '',      //显示校区地址
        resAddr: '',       //传给后端的位置信息
      }
    },
    methods:{
    	//控制popup组件的弹出和隐藏
         showPopup () {
        	this.show = true
      	},
       //改变地址选择，当切换省市区时进行数据留存
      changeAddr (picker) {
        //value=0改变省，1改变市，2改变区
        let val = picker.getValues()
        this.resAddr = val
      },
       //选好地址后点击确定
      chooseThis () {
        this.show = false
        //选中地址成功后回显
        this.showAddr = this.resAddr[0].name + '-' + this.resAddr[1].name + '-' + this.resAddr[2].name
        console.log(this.resAddr, '即将传给后端的省市区信息')
      },
    }
  }

/* eslint-disable */ 
export default {
    province_list: {
      110000: '北京市',
      120000: '天津市',
      130000: '河北省',
      140000: '山西省',
      150000: '内蒙古自治区',
      。。。。。