小程序 picker多列选择器

picker多列选择器的使用

 <view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
    value="{{multiIndex}}" range-key="name" range="{{multiArray}}">
    <view class="picker">
      当前选择：{{first}},{{second}}
    </view>
  </picker>
</view>

data:{
	first:"",
    second:"",
    multiId: 0,
    multiIndex: [0, 0],
    // 修改成pick组件所需要的数据格式
     multiArray: [],
    // 后台返回的数据格式
    resultTemp: [
      {
        id: 1,
        name: "上海校区",
        son: [
          {
            id: 11,
            name: "一班" //与外层的key保持一致 例如name
          },
          {
            id: 12,
            name: "二班"
          },
          {
            id: 13,
            name: "三班"
          }
        ]
      },
      {
        id: 2,
        name: "北京校区",
        son: [
          {
            id: 21,
            name: "四班"
          },
          {
            id: 22,
            name: "五班"
          },
          {
            id: 23,
            name: "六班"
          }
        ]
      },
    ],
     
}

 onLoad() {
   //拿到后台返回数据之后 将数据格式转换成pick多列选择器需要的格式
   // multiArray: [['上海校区', '北京校区'], ['一班', '二班', '三班']],
   this.getMultiArray() //获取后台数据之后 调用此方法  (此处是在data里面写的静态假数据，所以在onload里面调用了此方法 ) 
  },
  
 getMultiArray(){
	let firstArray = []
    let secondArray = []
    let multiArray = []
    this.data.resultTemp.forEach(item => {
      let groupObj = {
        id: item.id,
        name: item.name
      }
      firstArray.push(groupObj)
      secondArray.push(item.son) 
    })
    multiArray[0] = firstArray
    multiArray[1] = secondArray[0]
    this.setData({
      multiArray: multiArray,
      multiId: multiArray[0][0].id,
      first:multiArray[0][0].name,
      second:multiArray[1][0].name
    })
 },
	
  // value 改变时触发 change 事件，event.detail = {value}
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value,
      first:this.data.multiArray[0][e.detail.value[0]].name,
      second:this.data.multiArray[1][e.detail.value[1]].name
    })
  },
  // 列改变时触发
  bindMultiPickerColumnChange(e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    let data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        let multiId = this.data.multiArray[0][e.detail.value].id
        // 根据校区id 查找到对象的班级  修改multiArray数据值
        this.data.resultTemp.forEach(item => {
          if (item.id == multiId) {
            this.data.multiArray[1] = item.son
          }
        })
        this.setData({
          multiArray: this.data.multiArray
        })
        data.multiIndex[1] = 0;
        break;
    }
  },