小程序多列对象选择器处理
先看下效果图：
数据格式有如：
选择器页面代码：（range-key一定要有）
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key='OrgName'>
<view class="picker">
{{multiArray[0][multiIndex[0]].OrgName}}{{multiArray[1][multiIndex[1]].OrgName}}
</view>
</picker>
JS数据：
multiArray: [
[],
[]
],
multiIndex: [0, 0],
函数：获取数据列表，并在头部添加一个全部元素，默认取接口全部数据
getorglistcallbackFun: function(data) {
var city = [];
data.unshift({
'RegionName': '全部',
'ol': [{
'OrgID': '',
'OrgName': '全部'
}]
});
console.log(data);
for (let i in data) {
city.push({
OrgName: data[i].RegionName
})
}
var multiArray = this.data.multiArray;
multiArray[0] = city;
multiArray[1] = this.getstore(this.data.multiIndex[1], data);
this.setData({
data: data,
multiArray: multiArray
})
console.log(multiArray);
},
一个点击确认事件处理，获取数据。一个选择器变动，联动数据处理。这块基于第一列的变动，取对应索引下的二级数据。执行getstore，通过索引值在大数据里去找去拼装
获取二级数据处理：
bindMultiPickerChange: function(e) {
console.log(e.detail.value);
this.setData({
multiIndex: e.detail.value,
})
console.log('获取接口数据。');
},
bindMultiPickerColumnChange: function(e) {
let that = this
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
//第一列改变 设置第二列数据
let arr = that.getstore(this.data.multiIndex[0], this.data.data)
data.multiArray[1] = arr
that.setData({
multiArray: data.multiArray
})
break;
case 1:
//第二列改变
// console.log(data.multiArray[1][e.detail.value].OrgID)
break;
}
},
/***根据第一列数据的编码去匹配对应的第二列数据**/
getstore: function(index, data) {
var ol = data[index].ol;
var r = [];
for (let i in ol) {
let arr = {
'OrgID': ol[i].OrgID,
'OrgName': ol[i].OrgName
}
r.push(arr);
}
return r;
},
