微信小程序picker组件使用自定义json数组的绑定问题

    在微信小程序中，当用户用到下拉选择菜单时，我们经常使用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>