问题描述:循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变。
解决方法:
1、页面内容:
<view wx:for="{{repairDevice}}" wx:key>
<view class="cu-form-group">
<view class="title">车辆维修部位</view>
<picker data-index="{{index}}" bindchange="repairChange" data-id="{{item.id}}" value="{{item.id}}" range="{{repairParts}}" range-key='partName'>
<view class="picker">
{{item.id==0'请选择车辆维修部位':repairParts[item.idIndex].partName}}
</view>
</picker>
</view>
<view class="cu-form-group-A" data-index="{{index}}" data-tag="before_change_code" bindtap='scanCodeBefore'>
<view class="title">解绑</view>
<input placeholder="解绑" value="{{item.before_change_code}}" disabled='true'></input>
<text class="icon-scan text-blue"></text>
</view>
<view class="cu-form-group-A" data-index="{{index}}" data-tag="after_change_code" bindtap='scanCodeAfter'>
<view class="title">绑定</view>
<input placeholder="绑定" value="{{item.after_change_code}}" disabled='true'></input>
<text class="icon-scan text-blue"></text>
</view>
</view>
2、数据格式
repairDevice数据格式:
[{
name: '', //维修部分名称
id: 0, //维修部分ID
idIndex:0,//很重要 记录repairParts数据下标
before_change_code: '', //解绑编码
after_change_code: '', //绑定编码
}]
picker选择器数据:此处需要指定range-key
[
{id: "1", partName: "动力电池"},
{id: "2", partName: "驱动电机"},
{id: "3", partName: "整车控制器"},
{id: "4", partName: "电机控制器"}
]
3、触发事件
/****溯源维修部位选择 */
repairChange(e) {
let that = this
let index = e.currentTarget.dataset.index;
let repairDevice = that.data.repairDevice;
//获取配件的id,name赋值给遍历的数据repairDevice
repairDevice[index].id = that.data.repairParts[e.detail.value].id
repairDevice[index].idIndex=e.detail.value
repairDevice[index].name = that.data.repairParts[e.detail.value].partName,
that.setData({
repairDevice: repairDevice
})
},