微信小程序：封装表格组件并引用

一、效果

封装表格组件，在父页面中展示表格组件并显示数据

二、表格组件

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 || '