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

一、效果

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

二、表格组件

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