小程序picker三级联动

直接上代码

WXML

<picker name="create_id" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindGradeChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="{{'title'}}">
            <view class='pick-content'>
              <text>{{multiArray[0][multiIndex[0]].title}}，{{multiArray[1][multiIndex[1]].title}}，{{multiArray[2][multiIndex[2]].title}}</text>
            </view>
</picker>

js

 bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindGradeChange(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
    if (e.detail.column == 0) {
      var grade = this.data.multiArray[0][data.multiIndex[0]];
      data.multiArray[1] = this.data.allGrade[grade.id].teams
      data.multiIndex[1] = 0;
      var classes = data.multiArray[1][0];
      let arr = this.data.allStudents[classes.id] ? this.data.allStudents[classes.id] : [];
      data.multiArray[2] = arr
      data.multiIndex[2] = 0
    } else if (e.detail.column == 1) {
      var classes = this.data.multiArray[1][data.multiIndex[1]];
      let arr = this.data.allStudents[classes.id] ? this.data.allStudents[classes.id] : [];
      data.multiArray[2] = arr
      data.multiIndex[2] = 0
    }
    this.setData(data);
  },

数据格式（以年级为例）

 [    {
        title: '一年级',
        id: 1
      }, {
        title: '二年级',
        id: 2
      }, {
        title: '三年级',
        id: 3
      }, {
        title: '四年级',
        id: 4
      }, {
        title: '五年级',
        id: 5
      }, {
        title: '六年级',
        id: 6
      }
]

实现效果