小程序的picker事件，当数据源不是一维数组而是object的时候获取数据

一、小程序picker使用

注意：

小程序的picker，更好的处理的select事件以及应对深层次的多级联动，对于单选的picker，最简单的就是选择数据和要展示的一 一对象，这样我们可以直接使用数据。

1展示的数据picker的数据图如下：

二、使用流程代码如下

1，在wxml中使用range-key可以更改为选项列表展示的数据，range-key是什么，在显示的数据这里就得写什么，我在range-key是“storeName”，所以StoreList[index].StoreName是我们选中以后需要展示的数据，代码如下：

 <picker name="idCard" class="selectPicker" bindchange="bindPickerChange" value="{{index}}" range="{{StoreList}}" range-key="StoreName">
        <view class="picker">
            选择门店：{{StoreList[index].StoreName}}
        </view>
    </picker>

2，wxml代码中StoreList接口返回的门店列表object对象，数据如下：

注意：要想获取到以上对象中的其中的某一条数据，我们最先想到的就是遍历，循环，可是这样一来会多出很多无用的标签。还会想到用foreach数据提炼出来，改成一维数组。但是对象中的数据ID没法对应了。

3，选中后的展示，和数据源（object对象）通过index来对应起来，对应的js如下：

bindPickerChange: function (e) {
        let that = this
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
            index: e.detail.value,
            //获取门店选中后的storeid
            StoreID:that.data.StoreList[e.detail.value].StoreID
        })
        //选择门店给StoreID重新赋值
        wx.setStorageSync('StoreID',that.data.StoreID)
        console.log('选择则门店的StoreID',that.data.StoreID)
    },

三、成功示例图如下