uniapp 的 picker 当数据需要循环的时候 多次渲染picker 如何传index
项目中础到picker组件是循环出来的,下拉的内容又是对象的时候的问题。这个时候如果picker的绑定值就设成value="index”的话,就会出现选择一个,其他的picker全部改变的情况,解决办法 :需要一个额外的下拉框的index数组来进行把控是哪一个index这样来进行改变。这样子就可以解决问题了。
·
项目中础到picker组件是循环出来的,下拉的内容又是对象的时候的问题。这个时候如果picker的绑定值就设成value="index”的话,就会出现选择一个,其他的picker全部改变的情况,
解决办法 :需要一个额外的下拉框的index数组来进行把控是哪一个index 这样来进行改变
代码 :
<view class="main-contentView-item" v-for="(item,index) in tableDatas.portState" :key="index">
<view class="width-50 main-contentView-item-item text-center">
<input type="text" :value="item.port_id" disabled/>
</view>
<view class="width-200 main-contentView-item-item text-center">
<!-- <select>
<option :selected="item.mode ==0" value='0'>access</option>
<option :selected="item.mode ==1" value='1'>thrunk</option>
</select> -->
<picker @change="bindPickerChange(index,$event)"
:value="k_for[item.mode]"
:range="range" range-key="text">
<view class="uni-input">{{range[k_for[item.mode]]['text']}}</view>
</picker>
</view>
<view class="width-200 text-center main-contentView-item-item">
<input type="text" :value="item.pv_id" />
</view>
<view class="width-300 text-center main-contentView-item-item" >
<input type="text" :value="item.value" :disabled="item.mode === 0 ? true : false" />
</view>
</view>
data() {
return
{
range: [
{ value: 0, text: "access" },
{ value: 1, text: "thrunk" },
],
k_for:[0,1],
tableDatas:{
portState:[
{
port_id: "1",
mode: 0,
vlan: 1,
pv_id: 291.37,
value: 1
},
{
port_id: "2",
mode: 0,
vlan: 1,
pv_id: 291.37,
value: 1
},
{
port_id: "3",
mode: 1,
vlan: 1,
pv_id: 291.37,
value: 0
},
]
},
}
}
methods: {
bindPickerChange(index,e) {
console.log('index',index)
console.log('picker发送选择改变,携带值为', e.target.value)
// this.currentMode =e.target.value;
// this.$set(this.k_for,index,e.target.value)
this.tableDatas.portState[index].mode = e.target.value;
console.log(this.tableDatas.portState)
},
}
这样子就可以解决问题了
更多推荐
已为社区贡献1条内容
所有评论(0)