【原生小程序-pink 多选(最多三个,最少一个)】

<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>
// pages/picker/picker.js
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,
    });
  },
 
 
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值