本文實例講述了微信小程序實現的繪制table表格功能。分享給大家供大家參考，具體如下：

表格的繪制

js

Page({data:{infeed:['"", "1周", "2周", "3周", "總計"],endwise1: "游泳",tb1:"0",tb2:"0",tb3:"0",tb4:"0",endwise2: "跑步",tc1:"0",tc2:"0",tc3:"0",tc4:"0",endwise3: "健身",td1:"0",td2:"0",td3:"0",td4:"0",}})

wxml

<view class="tle">  <view class="ae by-c">  <block wx:for="{{infeed}}" wx:key="*this">   <view class="dd">{{item}}</view>  </block>  </view>  <block >  <view class="ae by-w " >   <view class="wc a-y">{{endwise1}}</view>   <view class="wc">{{tb1}}</view>   <view class="wc">{{tb2}}</view>   <view class="wc">{{tb3}}</view>   <view class="wc">{{tb4}}</view>  </view>   <view class="ae by-w" >   <view class="wc a-y">{{endwise2}}</view>   <view class="wc">{{tc1}}</view>   <view class="wc">{{tc2}}</view>   <view class="wc">{{tc3}}</view>   <view class="wc">{{tc4}}</view>  </view>   <view class="ae by-w" >   <view class="wc a-yellow">{{endwise3}}</view>   <view class="wc">{{td1}}</view>   <view class="wc">{{td2}}</view>   <view class="wc">{{td3}}</view>   <view class="wc">{{td4}}</view>  </view>  </block></view>

wxss

.tle { border-top: 1px solid #ebc450; margin: 20rpx 0; border-left: 1px solid #c9c9c9;}.ae { display: flex; width: 100%; justify-content: center; align-items: center; text-align: center;}.wc { width: 40%; justify-content: center; text-align: center; height: 90rpx; line-height: 90rpx; border-bottom: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9;}.by-c{ background: snow;}.by-w { background: #e6f3f9;}.a-y { background: #ffecb5; border-bottom: 1px solid #edd079; border-right: 1px solid #edd079;}.dd { width: 40%; border-bottom: 1px solid #edd079; border-right: 1px solid #edd079; justify-content: center; background: #ffecb5; color: #333; display: flex; height: 90rpx; align-items: center;}

希望本文所述對大家微信小程序開發有所幫助。