效果

小程式中如何實現三級選擇器元件？（程式碼範例）

實作過程

<view class="section">
    <view class="section__title">{{title}}</view>
    <picker bindchange="bindPickerChange" value="{{multiIndex}}" range="{{multiArray}}" mode="multiSelector" bindcolumnchange="columnchange">
      <view class="picker">  
      <view class=&#39;words&#39;>
        <!-- {{multiArray[2][multiIndex[2]]}} -->
        {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}      </view>
      <image src=&#39;/image/right.png&#39;></image>  
    </view> 
    </picker>
  </view>

登入後複製

在小程式已有的picker元件中設定mode=" multiSelector"，使其成為多列選擇器。

在多列選擇器中有兩個重要的參數：

properties: {
    multiArray: Array,
    multiIndex: Array
  }

登入後複製

multiArray是一個二維數組，存放選擇器每一列上的選項清單。 multiIndex是一個一維數組，存放每一列被選中的值，例：[0,0,0] 表示第一列選中了第0個選項，第二列也選中了第0個選項，以此類推。這兩個參數都由使用到三列選擇器的頁面傳入。

在小程式已有的picker元件中綁定bindPickerChange事件和columnchange事件，當使用者確定選擇器的選項值或改變某列選項值時會分別觸發這兩個事件：

methods: {    //这个只有在点确定的时候才会触发
    bindPickerChange: function (e) {
      this.triggerEvent("multiSelectorValue", e.detail)// 更新下标字段
      multiIndex，event.detail = {value: value}
    },
    columnchange: function (e) {
      this.triggerEvent("multiSelectorColumn", e.detail)// detail包含当前改变的列和改变的列的数值，event.detail = {column: column, value: value}
    }
  }

登入後複製

設定multiSelectorValue事件和multiSelectorColumn事件，來讓用到三列選擇器的頁面捕捉到選擇器選項值的改變。

在要用到三列選擇器的頁面裡引入三列選擇器元件，例如叫v-picker-multiSelector：

<v-picker-multiSelector multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"  
bind:multiSelectorValue="receiveMultiSelectorValue" bind:multiSelectorColumn="receiveMultiSelectorColumn">
</v-picker-multiSelector>

登入後複製

透過設定receiveMultiSelectorValue函數和receiveMultiSelectorColumn函數來接收選項值的變化：

//当用户改变种植区某列选项时触发的事件
receiveMultiSelectorColumn: 
function (e) {
  const column = e.detail.column  
  const columnValue = e.detail.value  
  switch (column) {    
  case 0:      
  this.data.multiIndex[0] = columnValue //更新省值

      this.data.multiArray[1] = this.testGetCity(this.data.provinceList[columnValue]) //获取市列表
      this.data.cityList = this.data.multiArray[1] //更新市列表
      this.data.multiIndex[1] = 0 // 将市默认选择第一个

      this.data.multiArray[2] = this.testGetPlantingArea(this.data.cityList[0]) //获取区列表
      this.data.plantingAreaList = this.data.multiArray[2] //更新种植区列表
      this.data.multiIndex[2] = 0 // 将区默认选择第一个

      this.setData({
        multiArray: this.data.multiArray,
        multiIndex: this.data.multiIndex
      })      break

    case 1:      this.data.multiIndex[1] = columnValue //更新市值

      //this.data.multiArray[2] = this.getPlantingArea(this.data.cityList[columnValue])//获取区列表
      this.data.multiArray[2] = this.testGetPlantingArea(this.data.cityList[columnValue]) //测试用,获取区列表
      this.data.plantingAreaList = this.data.multiArray[2] //更新种植区列表
      this.data.multiIndex[2] = 0 // 将区默认选择第一个

      this.setData({
        multiArray: this.data.multiArray,
        multiIndex: this.data.multiIndex
      })      break
  }
}

登入後複製

當三列選擇器的某一列值改變時，頁面會從元件接收到改變的列數（column）和該列被選擇的值（columnValue）。對column進行判斷，如果column=0，那麼根據columnValue的值向後端請求回該省的市列表，並根據市列表的的第一位向後端請求回該市的區列表。如果column=1，那麼根據columnValue的值向後端請求回該市的區域列表。

receiveMultiSelectorValue: function (e) {
      this.setData({
        multiIndex: e.detail.value
      })      this.data.region[0] = this.data.multiArray[0][this.data.multiIndex[0]]      
      this.data.region[1] = this.data.multiArray[1][this.data.multiIndex[1]]      
      this.data.region[2] = this.data.multiArray[2][this.data.multiIndex[2]]      
      this.setData({
        region: this.data.region
      })      //console.log(this.data.region)
    }

登入後複製

當使用者確定三列選擇器的選項時，頁面會從元件中接收到multiIndex的值，並對選項值進行更新。