一、效果

封裝表格組件，在父頁面中展示表格組件并顯示數據

二、表格組件

1、創建頁面

創建一個components文件夾，專門用于存儲組件的文件夾

創建Table表格組件

2、視圖層

(1)表頭數據

這里會從父組件中傳遞表頭數據，這里為columns，后續會講解數據由來

循環表頭數組，將表頭名稱，寬度進行展示

<!-- 表頭 -->
<view class="table-header"><block wx:for="{{columns}}" wx:key="field"><view style="width: {{item.width || 'auto'}}" class="table-cell">{{item.label}}</view></block>
</view>

(2)表格數據

這里從js獲取表格數據tableData

循環表格數據：循環內首先循環表頭，然后取出表頭的field對應到表格數據行的字段進行展示

<!-- 表格數據 -->
<block wx:for="{{tableData}}" wx:key="id"><view class="table-row"><block wx:for="{{columns}}" wx:key="field" wx:for-item="column"><view style="width: {{column.width || 'auto'}}" class="table-cell">{{item[column.field]}}</view></block></view>
</block>

(3)視圖層完整代碼

<view class="table-container"><!-- 表頭 --><view class="table-header"><block wx:for="{{columns}}" wx:key="field"><view style="width: {{item.width || 'auto'}}" class="table-cell">{{item.label}}</view></block></view><!-- 表格數據 --><block wx:for="{{tableData}}" wx:key="id"><view class="table-row"><block wx:for="{{columns}}" wx:key="field" wx:for-item="column"><view style="width: {{column.width || '