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 } ]
效果
|
请发表评论