vant-Area省市区联动

vant按需引入
import { Cell, CellGroup, Popup, Field, Area, Picker } from 'vant’
Vue.use(Area)
Vue.use(Popup)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Field)
Vue.use(Picker)

<template>
  <div class="wzl_address">
  
    <!--confirm   点击右上方完成按钮   一个数组参数，具体格式看下方数据格式章节
      cancel    点击取消按钮时
    change    选项改变时触发 参考Picker 实例，所有列选中值，当前列对应的索引-->
    
    <van-cell-group>
      <van-cell v-model="carmodel" title="地区" value @click="show = true"></van-cell>
      <van-popup v-model="show" position="bottom">
        <van-area
          ref="area"
          value="110000"
          :area-list="areaList"
          @change="onChange"
          //点及确定按钮
          @confirm="yes"
          @cancel="show = false"
        />
          <div class="wzl_xz">
            <img src="../../../public/img/right.svg" alt />
          </div>
      </van-popup>
    </van-cell-group>
  </div>
</template>
<script>
//引入所有的省市区
import address from '../../../public/address'
export default {
  data () {
    return {
      show: false,
      //当前选择的城市
      carmodel: '请选择',
      areaList: {
        province_list: {},
        city_list: {},
        county_list: {}
      },
      //存放当前选择的城市，点击确定时将它赋给carmodel
      con: ''
    }
  },
  created () {
    console.log(address)
    this.areaList.province_list = address.province_list
    this.areaList.city_list = address.city_list
    this.areaList.county_list = address.county_list
  },
  methods: {
    onChange (picker, value, index) {
      console.log('当前值：' + value + '当前索引：' + index)
      let areaName = ''
      for (var i = 0; i < value.length; i++) {
        areaName = areaName + value[i].name + ' '
      }
      this.con = areaName
    },
    yes () {
      this.carmodel = this.con
      this.show = false
    }
  }
}
</script>

具体查看vant官方文档： https://youzan.github.io/vant/#/zh-CN/area