小程序自定义三级联动

小程序的picker组件中，三级联动的只有省市区、时间等等，某些自定义要求高的的就要使用picker的多列选择器了，

效果图：
当滑动每一列的时候，会根据每列的唯一标识去查找下一列对应的数据

后台返回的数据是一个三维数组

wxml代码

	<picker 
        mode="multiSelector" 
        bindchange="bindCustomPickerChange"   
        bindcolumnchange="bindCustomPickerColumnChange" 
        value="{{customIndex}}" 
        range="{{onlyArray}}"
        header-text="请选择工作地点"
      >
        <view class="select-place-style">
          {{placeText||'请选择您今日的工作地点'}}
          <image src="{{imagePath}}/arrow-right.png" style="width:28rpx;height:33rpx"></image>
        </view>
      </picker>

js代码

首先拿到这个三维数组的时候要进行处理，小程序这个picker组件不能渲染对象数组，坑爹！！

data: {
	//根据索引查找
	customIndex: [0, 0, 0],
    list: [],
    onlyArray: [
      [],
      [],
      []
    ],
    placeText:'',
}

// 初始化网点picker数据
  initPickerData() {
    stationAppointModules.getWorkPlaces(res => {
      let list = res.data
      let {customIndex, onlyArray} = this.data
      let data = {list, customIndex, onlyArray}
      for (let i = 0; i < data.list.length; i++) {
        data.onlyArray[0].push(data.list[i].name)
      }
      for (let j = 0; j < data.list[data.customIndex[0]].childrenRegion.length; j++) {
        data.onlyArray[1].push(data.list[data.customIndex[0]].childrenRegion[j].name)
      }
      for (let k = 0; k < data.list[data.customIndex[0]].childrenRegion[data.customIndex[1]].childrenRegion.length; k++) {
        data.onlyArray[2].push(data.list[data.customIndex[0]].childrenRegion[data.customIndex[1]].childrenRegion[k].name)
      }
      // console.log(data)
      this.setData(data)
    })
  },
//点击picker确定按钮时触发
 bindCustomPickerChange(e) {
    let {list, customIndex, onlyArray} = this.data
    // console.log(e.detail.value);
    // console.log(customArray)
    //这里的三层for循环是为了取出最底层数组中的站点id传给后台
    for (let x = 0; x < list.length; x++) {
      for (let y = 0; y < list[x].childrenRegion.length; y++) {
        for (let z = 0; z < list[x].childrenRegion[y].childrenRegion.length; z++) {
          console.log(list[x].childrenRegion[y].childrenRegion[e.detail.value[2]].id)
          this.siteId = list[x].childrenRegion[y].childrenRegion[e.detail.value[2]].id
        }
      }
    }
    this.setData({
      customIndex: e.detail.value,
      placeText:`${onlyArray[0][customIndex[0]]}-${onlyArray[1][customIndex[1]]}-${onlyArray[2][customIndex[2]]}`
    })
  },

//列改变时触发
  bindCustomPickerColumnChange(e) {
    let {list, customIndex, onlyArray} = this.data
    customIndex[e.detail.column] = e.detail.value
    //更新数据
    const searchColumn = () => {
      console.log(e)
      for (let i = 0; i < list.length; i++) {
        let arr1 = []
        let arr2 = []
        console.log(e)
        console.log(customIndex[0])
        if (i === customIndex[0]) {
          for (let j = 0; j < list[i].childrenRegion.length; j++) {
            console.log(list[i])
            arr1.push(list[i].childrenRegion[j].name)
            if (j === customIndex[1]) {
              for (let k = 0; k < list[i].childrenRegion[j].childrenRegion.length; k++) {
                arr2.push(list[i].childrenRegion[j].childrenRegion[k].name)
              }
              onlyArray[2] = arr2
            }
          }
          onlyArray[1] = arr1
        }
      }
    }
    switch (e.detail.column) {
      case 0:
        customIndex[1] = 0
        customIndex[2] = 0
        searchColumn()
        break;
      case 1:
        customIndex[2] = 0
        searchColumn()
        break
    }
    this.setData({
      onlyArray: onlyArray,
      customIndex: customIndex
    })
  },