微信小程序 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