小程序multiSelector 动态加载数据

项目中需要获取到城市的id，所以小程序自有的region类型就不合适了，需要根据接口动态获取数据

wxml

<picker mode="multiSelector" @change="bindProChange" @columnchange="bindColumnChange" value=0 :range="multiArray" :range-key="'name'">
  <div class="item-right">
    <div class="location-des dealer" v-if="proIndex === ''"></div>
    <div class="location-des dealer" v-else>{{proData[proIndex].name}}, {{cityData[cityIndex].name}}</div>
    <img src="../../../static/images/right-arr.png" alt="">
  </div>
</picker>

ps：bindProChange为点击吊起选择器上的确定按钮触发的事件，bindColumnChange为滑动列触发的事件。另小程序使用mpvue开发

javascript

import { getCityData, getProData } from '@/api/main'
data() {
    return{
        proData: [],
        proIndex: '',
        cityData: [],
        cityIndex: '',
        cityId: '',
        multiArray: []
    }
},
async onShow () {
    const res = await getProData({})
    this.proData = res.data.data.area_list
    this.cateList = res.data.data.cate_list
    const ress = await getCityData({pid: this.proData[0].id})
    this.cityData = ress.data.data
    this.multiArray = [[...this.proData], [...this.cityData]]
},
methods: {
    async bindProChange (e) {
      this.proIndex = e.mp.detail.value[0]
      const res = await getCityData({pid: this.proData[this.proIndex].id})
      this.cityData = res.data.data
      this.cityIndex = e.mp.detail.value[1]
      this.cityId = this.cityData[this.cityIndex].id
    },
    async bindColumnChange (e) {
      // 0-省份切换 1-城市切换
      if (e.mp.detail.column === 0) {
        this.proIndex = e.mp.detail.value
        const res = await getCityData({pid: this.proData[this.proIndex].id})
        this.cityData = res.data.data
        this.multiArray = [[...this.proData], [...this.cityData]]
      } else {
        this.cityIndex = e.mp.detail.value
        this.cityId = this.cityData[this.cityIndex].id
      }
    }
}

在类型为multiSelector的选择器，e.mp.detail.column这个值会变为数组类型，其值代表每一列的index。