1赖临、 需求：省市選擇器鳞滨。

原生的省市區(qū)（mode=region）選擇器只能獲取漢字芬骄，不能定制每個省市的id卒稳，另外區(qū)選擇器實際項目中沒有使用到蹋半，思考下后選擇手動修改多列選擇器（mode=multiSelector）實現(xiàn)功能。

2充坑、 實現(xiàn)效果

省市聯(lián)動效果

3减江、代碼

實現(xiàn)原理：multiArray是二維數(shù)組，省數(shù)據(jù)保存在二維數(shù)組第0個中捻爷，市數(shù)據(jù)切換放入二維數(shù)據(jù)第1個中辈灼，根據(jù)multiIndex確定選擇項。
數(shù)據(jù)：省市是靜態(tài)數(shù)據(jù)保存在config也榄，數(shù)據(jù)格式下圖

[{
    value: '110000',
    label: '北京市',
    level: 1,
    children: [
      {
        value: '110000',
        label: '北京市',
        level: 2
      }
    ]
  },
  {
    value: '500000',
    label: '重慶市',
    level: 1,
    children: [
      {
        value: '500000',
        label: '重慶市',
        level: 2
      }
    ]
  }]

wxml:

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="label">
      <view class="picker">
        {{multiArray[0][multiIndex[0]].label}}巡莹，{{multiArray[1][multiIndex[1]].label}}
      </view>
</picker>

首先在onload中獲取數(shù)據(jù)塞在picker組件中

async onLoad() {
    this.multiArray = [[...city], [...city[0].children]];
    this.$apply();
}

之后監(jiān)聽bindMultiPickerColumnChange列change事件，滾動第一列更改第二列數(shù)據(jù)

bindMultiPickerColumnChange: function(e) {
      var data = {
        multiArray: this.data.multiArray,
        multiIndex: this.data.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
        case 0:
          data.multiArray[1] = city[e.detail.value].children;
          break;
      }
      this.multiArray = this.data.multiArray;
      this.multiIndex = this.data.multiIndex;
      // 使用wepy開發(fā)甜紫，this.$apply()為臟數(shù)據(jù)檢查
      this.$apply();
}

選擇省市后獲取選擇選項降宅，所有數(shù)據(jù)都保存在multiArray中

bindMultiPickerChange: function(e) {
      console.log(
        this.multiArray[0][e.detail.value[0]],
        this.multiArray[1][e.detail.value[1]]
      ); // {value: "431000", label: "郴州市", level: 2}
      this.multiIndex = e.detail.value;
      this.$apply();
 }