微信小程序自定义地区三级联动mpvue

<template>
  <div>
    <div>
      <picker @change="changeMultiPicker3" @columnchange="handlechange" mode = "multiSelector" v-model="multiIndex3" :range="multiArray3">
        <div>
          <input type="text" v-model="address" placeholder="请选择" disabled>
        </div>
      </picker>
    </div>
  </div>
</template>

<script>
import {get} from '@/utils/request'
export default {
  data () {
    return {
      multiArray3: [[], [], []],
      multiIndex3: [0, 0, 0],
      areaCode: '',
      sheng: '',
      shi: '',
      qu: '',
      address: ''
    }
  },
  methods: {
    changeMultiPicker3 (e) {
      this.multiIndex3 = e.mp.detail.value
      this.address = this.sheng[this.multiIndex3[0]].name + this.shi[this.multiIndex3[1]].name + this.qu[this.multiIndex3[2]].name
      this.areaCode = this.qu[this.multiIndex3[2]].areaCode
      this.$emit('getAreaCode', this.areaCode)
      console.log(this.areaCode)
    },
    async handlechange (e) {
      var data = {
        multiArray: this.multiArray3,
        multiIndex: this.multiIndex3,
        sheng: this.sheng,
        shi: [],
        qu: []
      }
      data.multiIndex[e.mp.detail.column] = e.mp.detail.value
      switch (e.mp.detail.column) {
        case 0:     
        //  获取第二列市的数据
          let sCode = this.sheng[e.mp.detail.value].areaCode  
          let res = await get('9004/api/area/' + sCode)
          let arr = []
          this.shi = res.data
          for (let index in res.data) {
            arr.push(res.data[index].name)
          }
          data.multiArray.splice(1, 1, arr)
         //  获取默认第三列区的数据
          let DCode = this.shi[data.multiIndex[1]].areaCode
          let Dres1 = await get('9004/api/area/' + DCode)
          let Darr1 = []
          this.qu = Dres1.data
          for (let index1 in Dres1.data) {
            Darr1.push(Dres1.data[index1].name)
          }
          data.multiArray.splice(2, 1, Darr1)
          break
        case 1:
        //通过第二列滑动，获取第三列区的数据
          let qCode = this.shi[e.mp.detail.value].areaCode
          let res1 = await get('9004/api/area/' + qCode)
          let arr1 = []
          this.qu = res1.data
          for (let index1 in res1.data) {
            arr1.push(res1.data[index1].name)
          }
          data.multiArray.splice(2, 1, arr1)
          break
      }
    },
    // 获取省的数据
    async getCityData () {
      let arr = await get('9004/api/area')
      this.sheng = arr.data
      var sheng = []
      for (let index in arr.data) {
        sheng.push(arr.data[index].name)
      }
      this.multiArray3[0] = sheng
    },
    initData () {
      this.multiArray3.splice(1, 1, [])
      this.multiArray3.splice(2, 1, [])
      this.multiIndex3 = [0, 0, 0]
      this.address = ''
      this.sheng = ''
      this.shi = ''
      this.qu = ''
      this.getCityData()
    }

  },
  async onReady () {
    this.getCityData()
  },
  onUnload () {
    this.initData()
  }
}
</script>

<style>

</style>

因为要获取地区对应的areacode,小程序自带的三级联动冇得，以前是一次性获取所有地区信息，自己分类。然后这一次是逐步获取的，