微信小程序 Table
<view class="pubOtherInfoTable"> <view class="pubOtherInfoTr bg-header"> <view class="pubOtherInfoTh"></view> <view class="pubOtherInfoTh">日期</view> <view class="pubOtherInfoTh">里程</view> <view class="pubOtherInfoTh">记录</view> </view> <block wx:for="{{baoyangArray}}" wx:key="{{code}}"> <view class="pubOtherInfoTr bg-trs" wx:if="{{index%2==0}}" data-idx='{{index}}'> <view class="pubOtherInfoTd" data-idx='{{index}}'>删除</view> <view class="pubOtherInfoTd"> <picker mode="date" value="{{carnumdate}}" start="2000-1-01" bindchange="bindDateChange"> <view class="picker" style="width:170rpx;">{{inputVal[index]?inputVal[index] :'请选日期'}} </view> <input type='text' style="display: none;" class='b-ipt' placeholder='请输入' data-idx='{{index}}' value='{{inputVal[index]}}' bindinput='getInputVal' /> </picker> </view> <view class="pubOtherInfoTd"> <input type='text' class='b-ipt' placeholder='请输入' data-idx='{{index}}' value='{{inputVal[index]}}' bindinput='getInputVal' /></view> <view class="pubOtherInfoTd"> <input type='text' class='b-ipt' placeholder='请输入' data-idx='{{index}}' value='{{inputVal[index]}}' /></view> </view> <view class="pubOtherInfoTr" data-idx='{{index}}' wx:else> </view> </block> </view>
.pubOtherInfoTable{ border-style: solid; border-width: 4rpx; margin-left: 20rpx; margin-right: 20rpx; border-color: #8A8A8A; } .pubOtherInfoTr{ display: flex; width: 100%; justify-content: center; height: 3rem; align-items: center; } .pubOtherInfoTd{ width: 40%; justify-content: center; text-align: center; } .pubOtherInfoTh{ width: 40%; color: #080808; display:inline-block; text-align: center; } .bg-header{ background-color: #ffe4b5; } .bg-trs{ background-color: #e6f3f9; }
//获取input的值 getInputVal:function(e){ var nowIdx=e.currentTarget.dataset.idx;//获取当前索引 var val=e.detail.value;//获取输入的值 var oldVal=this.data.inputVal; oldVal[nowIdx]=val;//修改对应索引值的内容 this.setData({ inputVal:oldVal }) }, //添加input addInput:function(){ var old=this.data.array; old.push(1);//这里不管push什么,只要数组长度增加1就行 this.setData({ array: old }) }, //删除input delInput:function(e){ var nowidx=e.currentTarget.dataset.idx;//当前索引 var oldInputVal=this.data.inputVal;//所有的input值 var oldarr=this.data.array;//循环内容 oldarr.splice(nowidx,1); //删除当前索引的内容,这样就能删除view了 oldInputVal.splice(nowidx,1);//view删除了对应的input值也要删掉 if (oldarr.length < 1) { oldarr = [0] //如果循环内容长度为0即删完了,必须要留一个默认的。这里oldarr只要是数组并且长度为1,里面的值随便是什么 } this.setData({ array:oldarr, inputVal: oldInputVal }) } ———————————————— 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 原文链接:https://blog.csdn.net/weixin_42017221/article/details/136786600