uniapp 的 picker 当数据需要循环的时候 多次渲染picker 如何传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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值