小程序--表格样式

index.js

Page({
  data: {
    listData: [
      {
        "materialCode": "DC12121", 
        "damageQuantity": "text1", 
        "damageCauseId": "type1", 
        "lackQuantity": "01", 
        "lackCauseId": "text1",
        "rejectQuantity": "type1", 
        "rejectCauseId": "拒收原因", 
      },
      {
        "materialCode": "DC12121", 
        "damageQuantity": "text1", 
        "damageCauseId": "type1", 
        "lackQuantity": "01", 
        "lackCauseId": "text1",
        "rejectQuantity": "type1", 
        "rejectCauseId": "拒收原因", 
      },
    ]
  },
  onLoad: function () {
    console.log('onLoad')
  }

})

index.wxml

<view class="table">
    <block wx:for="{{listData}}" wx:key="{[code]}">
        <view style="border:1px dashed pink;width: 90%;">
            <view wx:if="{{index % 2 == 0}}">
                <view class="tr bg-g">
                    <view class="td">物料</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">实发</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
                <view class="tr bg-g">
                    <view class="td">箱损</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">原因</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
                <view class="tr bg-g">
                    <view class="td">短少</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">原因</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
                <view class="tr bg-g">
                    <view class="td">拒收</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">原因</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
            </view>
            <view  wx:else>
                <view class="tablePink">
                    <view class="td">物料</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">实发</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
                <view class="tablePink">
                    <view class="td">箱损</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">原因</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
                <view class="tablePink">
                    <view class="td">短少</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">原因</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
                <view class="tablePink">
                    <view class="td">拒收</view>
                    <view class="content">{{item.materialCode}}</view>
                    <view class="td">原因</view>
                    <view class="content">{{item.damageQuantity}}</view>
                </view>
        </view> 
        </view>

    </block>
</view>

index.wxss

 .tr {
  display: flex;
  width: 400rpx;
  justify-content: center;
  height: 40rpx;
  font-size: 20rpx;
  align-items: center;
 }
 .td {
  width:40%;
  justify-content: center;
  text-align: center;
 }
 .content{
  width:40%;
  justify-content: center;
  text-align: center;
  background-color: white;
  margin-right: 20rpx;
 }
 .bg-w{
  background: snow;
 }
 .bg-g{
  background: #E6F3F9;
  width: auto;
 } 
 .tablePink{
  display: flex;
  width: 400rpx;
  justify-content: center;
  height: 40rpx;
  font-size: 20rpx;
  align-items: center;
   background-color: pink;
   width: auto;
 }