在微信小程序中，當用戶用到下拉選擇菜單時，我們經常使用picker，不過picker有一個小問題，就是獲取當前選中的值是數組的索引，同時令某一行選中，也是通過索引号傳遞實現的。目前我們經常使用的是數據庫中的id來保存數據。所以需要在這裡将微信picker組件中的value(數組索引号）換成我們真實數據中的id才好。

如下圖我們表中“工種”這個數組，其實是包含id和title屬性的。如果用戶切換選擇時，微信picker傳遞過來的是當前項在數組中的索引号，這裡我們需要通過索引号查詢到此元素的id也就是：this.data.workArr[e.detail.value].id這個代碼實現。

然後為了保持當前項被選中，我們傳遞給picker的value仍然需要是索引号，所以我們定義了一個字段workInx來保存每次變化後的索引号：

在changeWork方法保存workInx 為當前索引的值。在xml布局文件中value="{{ workInx }}"代碼實現對當前索引号位置的選中。

一、定義data數據

data: {

//用于picker展示的數據數組

workArr: [{

"id": 1,

"title": "電工"

},{

"id": 2,

"title": "瓦工"

}, {

"id": 3,

"title": "油工"

}

],

workId:0,//真實id（當前選擇的工種id,用于傳遞到後台）

workInx:0//picker當前選中的索引位置

},

//picker切換選擇的處理方法

changeWork: function (e) {

console.log(e);

this.setData({

' workId ': this.data.workArr[e.detail.value].id,

'workInx': e.detail.value

})

},

前端xml

<view class="centerPage-info-item">

<label>工種</label>

<label class="ico-moon icon-rightarrow"></label>

<picker mode="selector" class="centerPage" bindchange="changeWork" value="{{ workInx }}" range="{{ workArr }}" range-key="title">

<view class="picker">{{ workArr[workInx].title }}</view>

</picker>

</view>

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!