基于vue vant实现的地址组件

于vue vant实现的地址组件,地址四级联动,标签选择器,数据为模拟数据,可改成真实接口获取,三级,四级联动均可
完整下载地址:https://download.csdn.net/dow...

主要代码片段:
// 选择省

async selProvince(province, index, pIndex) {
  this.tabList = [province.name,'请选择']
  await this.getCity()
  this.active = 1
  this.cityIndex = null
},

// 选择市
async selCity(city, index, cIndex) {
  this.cityIndex = cIndex
  let [province] = this.tabList
  this.tabList = [province, city.name,'请选择']
  await this.getArea()
  this.active = 2
  this.areaIndex = null
},

// 选择县
async selArea(area, index, aIndex) {
  let [province,city] = this.tabList
  this.areaIndex = aIndex
  this.streetIndex = null
  this.tabList = [province,city,area.name,'请选择']
  await this.getStreet()
  this.active = 3
},


// 选择街道
async selStreet(streets, index, sIndex) {
  this.streetIndex = sIndex
  console.log(streets,'streetsstreets')
  this.tabList.splice(index, 1, streets.name)
  let [province,city,area,street] = this.tabList
  let info = {
    province,
    city,
    area,
    street,
  }
  this.$emit('address',info)
},