微信小程序中for循环里的picker，操作某一个picker 如何改变对应选择的值？

问题：在循环picker选择器时，该改变一个选项，导致全部的选项都被改变，如何操作才能实现只改变当前的操作项呢？？？

在js中设置一个数组变量，存储每个picker选择器默认的值；然后根据bingchange获取相应的索引、e.detail.value,根据这些更新数组，重新赋值，然后根据数组的索引、值更新相应的picker索引以及值。

代码如下：

<code>     <view class="complex-mark">
  <view class="table-head tr">
    <view class="td">A</view>
    <view class="td">B</view>
    <view class="td">C</view>
    <view class="td">D</view>
    <view class="td">E</view>
  </view>
  <block wx:for="{{selectTeeth}}" wx:key="{{index}}" wx:for-item="itm" wx:for-index="idx">
    <view class="tr tcon">
      <view class="td">{{itm.area}}</view>
      <view class="td">{{itm.num}}</view>
      <view class="td">
        <picker bindchange="bindPickerChangek" data-current="{{idx}}" value="{{itm.indexk}}" range="{{koutong}}">
          <view class="picker">
            {{koutong[itm.indexk]}}
          </view>
        </picker>
      </view>
      <view class="td">
        <picker bindchange="bindPickerChanges" data-current="{{idx}}" value="{{itm.indexs}}" range="{{songdong}}">
          <view class="picker">{{songdong[itm.indexs]}}
          </view>
        </picker>
      </view>
      <view class="td">
        <picker bindchange="bindPickerChangem" data-current="{{idx}}" value="{{itm.indexm}}" range="{{mentong}}">
          <view class="picker"> {{mentong[itm.indexm]}}
          </view>
        </picker>
      </view>
    </view>
  </block>
</view>
</code>

js部分:

<code>// pages/teeth/teeth.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tjType: "",
    creatTime: "",
    koutong: ["点击选择", "", "+", "++", "+++"],
    songdong: ["点击选择", "0", "Ⅰ", "Ⅱ", "Ⅲ"],
    mentong: ["点击选择", "有", "无"],
    selectTeeth: [{
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }, {
      area: "右上方",
      num: 2,
      indexk: 0,
      indexs: 0,
      indexm: 0,
    }],

  },

  bindPickerChangek(e) {

    const curindex = e.target.dataset.current;
    this.data.selectTeeth[curindex].indexk = e.detail.value;
    this.data.selectTeeth[curindex].selectkoutong = this.data.koutong[e.detail.value]
    this.setData({
      selectTeeth: this.data.selectTeeth
    })
    console.log(this.data.selectTeeth)
  },
  bindPickerChanges(e) {
    const curindex = e.target.dataset.current;
    this.data.selectTeeth[curindex].indexs = e.detail.value;
    this.data.selectTeeth[curindex].selectsongdong = this.data.songdong[e.detail.value]
    this.setData({
      selectTeeth: this.data.selectTeeth
    })
    console.log(this.data.selectTeeth)
  },
  bindPickerChangem(e) {
    const curindex = e.target.dataset.current;
    this.data.selectTeeth[curindex].indexm = e.detail.value;
    this.data.selectTeeth[curindex].selectmentong = this.data.mentong[e.detail.value]
    this.setData({
      selectTeeth: this.data.selectTeeth
    })
    console.log(this.data.selectTeeth)
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(e) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})
</code>

index.wxss

<code>page {
  background: #f2f2f2;
}

.teethNum {
  background: #fff;
  width: 100%;
}

.title {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  line-height: 140rpx;
}

.teeth {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100rpx;
}

.teeth .title {
  text-align: center;
  font-size: 16px;
}

.teeth-box {
  width: 49%;
}

.teeth-box:nth-child(1) {
  border-bottom: 1px solid #000;
}

.teeth-box:nth-child(2) {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}

.teeth-box:nth-child(3) {
  border-right: 1px solid #000;
}

.number {
  display: flex;
  flex-wrap: wrap;
  width: 76%;
  justify-content: space-around;
  margin: 0 auto;
  /* margin-top: 30rpx; */
}

.number view {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  color: #666;
  border-radius: 50%;
  border: 2px solid #666;
  margin-top: 10rpx;
}

.string {
  display: flex;
  justify-content: space-around;
  margin: 24rpx auto 50rpx auto;
}

.string view {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border: 2px solid #666;
  font-size: 14px;
  border-radius: 50%;
}

.complex-btn {
  color: #20a1c4;
  text-decoration: underline;
  margin-top: 40rpx;
  padding-bottom: 30rpx;
  text-align: center;
}

.complex {
  width: 750rpx;
  background: #fff;
  padding: 20rpx 0;
  margin-top: 50rpx;
}

.complex .title .right {
  color: #58b6bf;
}

.btn {
  width: 630rpx;
  height: 100rpx;
  background: #58b6bf;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 100rpx;
  margin-top: 60rpx;
  border-radius: 5px;
}

.teethCon {
  margin: 0 auto;
}

.tr {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
  padding-top: 15rpx;
  padding-bottom: 15rpx;
}

.number  .selected {
  border: 2px solid #58b6bf;
  color: #58b6bf;
}

.tr .left {
  line-height: 75rpx;
}

.td {
  width: 20%;
  text-align: center;
}

.table-head {
  background: #A2ECF3;
  color: #fff;
  padding: 10rpx 0;
}

.table-head td {
  color: #fff;
}

.td:nth-child(2) {
  width: 8%;
}

.td:nth-child(5) {
  width: 32%;
}

.complex-mark {
  margin-top: 20rpx;
}

.tcon {
  color: #000;
}

.title {
  padding-left: 15rpx;
}</code>