小程序多列对象选择器

先看下效果图：

数据格式有如：

选择器页面代码：（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;

},