<view>
<view class="section__title">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}" range="{{newArr}}">
<view class="picker">
当前选择: <van-button type="primary">
{{newArr[0][multiIndex[0]]}},{{newArr[1][multiIndex[1]]}},{{newArr[2][multiIndex[2]]}}</van-button>
</view>
</picker>
</view>
Page({
data: {
multiArray: [
{
"id": 1,
"label": "大专以下",
"children": []
},
{
"id": 2,
"label": "大专",
"children": [
{
"id": 21,
"label": "非统招",
"children": []
},
{
"id": 22,
"label": "统招",
"children": []
}
]
},
{
"id": 3,
"label": "本科",
"children": [
{
"id": 31,
"label": "非统招",
"children": [
{
"id": 311,
"label": "有学位证书",
"children": []
},
{
"id": 312,
"label": "无学位证书",
"children": []
}
]
},
{
"id": 32,
"label": "统招",
"children": [
{
"id": 321,
"label": "有学位证书",
"children": []
},
{
"id": 312,
"label": "无学位证书",
"children": []
}
]
}
]
},
{
"id": 4,
"label": "硕士",
"children": [
{
"id": 41,
"label": "非统招",
"children": [
{
"id": 411,
"label": "有学位证书",
"children": []
},
{
"id": 412,
"label": "无学位证书",
"children": []
}
]
},
{
"id": 42,
"label": "统招",
"children": [
{
"id": 421,
"label": "有学位证书",
"children": []
},
{
"id": 422,
"label": "无学位证书",
"children": []
}
]
}
]
},
{
"id": 5,
"label": "博士",
"children": [
{
"id": 51,
"label": "非统招",
"children": [
{
"id": 511,
"label": "有学位证书",
"children": []
},
{
"id": 512,
"label": "无学位证书",
"children": []
}
]
},
{
"id": 52,
"label": "统招",
"children": [
{
"id": 521,
"label": "有学位证书",
"children": []
},
{
"id": 522,
"label": "无学位证书",
"children": []
}
]
}
]
},
{
"id": 6,
"label": "博后",
"children": [
{
"id": 61,
"label": "非统招",
"children": [
{
"id": 611,
"label": "有学位证书",
"children": []
},
{
"id": 612,
"label": "无学位证书",
"children": []
}
]
},
{
"id": 62,
"label": "统招",
"children": [
{
"id": 621,
"label": "有学位证书",
"children": []
},
{
"id": 622,
"label": "无学位证书",
"children": []
}
]
}
]
}
]
multiIndex: [0, 0, 0],
multiIds: [],
newArr: [],
},
bindMultiPickerChange(e) {
console.log(this.data.multiIds);
},
bindMultiPickerColumnChange(e) {
let data = {
newArr: this.data.newArr,
multiIndex: this.data.multiIndex,
multiIds: this.data.multiIds,
};
data.multiIndex[e.detail.column] = e.detail.value;
let searchColumn = () => {
let arr1 = [];
let arr2 = [];
this.data.multiArray.map((v, vk) => {
if (data.multiIndex[0] === vk) {
data.multiIds[0] = {
...v,
};
v.children.map((c, ck) => {
arr1.push(c.label);
if (data.multiIndex[1] === ck) {
data.multiIds[1] = {
...c,
};
c.children.map((t, vt) => {
arr2.push(t.label);
if (data.multiIndex[2] === vt) {
data.multiIds[2] = {
...t,
};
}
});
}
});
}
});
data.newArr[1] = arr1;
data.newArr[2] = arr2;
};
switch (e.detail.column) {
case 0:
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
searchColumn();
break;
case 1:
data.multiIndex[2] = 0;
searchColumn();
break;
case 2:
searchColumn();
break;
}
this.setData(data);
},
onLoad: function (options) {
let state = {
arr: [],
arr1: [],
arr2: [],
arr3: [],
multiIds: []
}
this.data.multiArray.map((v, vk) => {
state.arr1.push(v.label);
if (this.data.multiIndex[0] === vk) {
state.multiIds[0] = v;
}
if (state.arr2.length <= 0) {
v.children.map((c, ck) => {
state.arr2.push(c.label);
if (this.data.multiIndex[1] === ck) {
state.multiIds[1] = c;
}
if (state.arr3.length <= 0) {
c.children.map((t, tk) => {
state.arr3.push(t.label);
if (this.data.multiIndex[2] === tk) {
state.multiIds[2] = t;
}
});
}
});
}
});
state.arr[0] = state.arr1;
state.arr[1] = [];
state.arr[2] = state.arr3;
this.setData({
newArr: state.arr,
multiIds: state.multiIds,
});
},
});