项目中础到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)
			  },
}

这样子就可以解决问题了

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐