小程序封装一个表格组件

封装一个table组件关键就是要控制表头跟单元格之间的距离，建议不要使用flex:1；这个属性，有的机型会出现错位的情况，建议使用百分比或者rpx。

首先创建一个table组件，在properties属性中定义表格相关的属性，便于遍历渲染，提高组件的复用性。
开始传统的布局书写,表头跟单元格之间的循环分开来，通过循环表头的下标，来控制表头中的每个单元格之间的宽度。表格组件的行与列之间，先遍历后台返回的表格数据，然后在遍历一行中需要展示的元素属性值，这样表格组件就可以完全的展示出来了。
table.wxml

<view class='container'>
    <view class="tab-header">
      <view class="tab-header-td"
          wx:for="{{tabHDate}}"
          wx:key="index"
          style="width:{{tabW[index]}}rpx"
      >
          {{item}}
      </view>
    </view>
    <view >
      <view class="tab-row"
          wx:for="{{rowData}}"
          wx:key="index"
      >
        <view 
            class="tab-row-td"
            wx:for="{{rowKey}}"
            wx:key="idx"
            wx:for-index="idx"
            wx:for-item="row"
            style="width:{{tabW[idx]}}rpx"
        >
          <view>{{item[row]}}</view>
        </view>
      </view>
      <view wx:if="{{rowData.length===0}}" class="no-text">暂无内容</view>
    </view>
    
</view>

table.css

/* components/table/table.wxss */
.container {
  height: 20rpx;
  padding: 0 20rpx;
} 
.tab-header,.tab-row{
  width: 100%;
  height: 94rpx;
  display: flex;
  align-items: center;
  background: #DEF1FF;
  
}
.tab-header-td,.tab-row-td{
  height: 100%;
  border-right: 1rpx solid #FFFFFF;
  display: flex;
  justify-content:center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  
}
.tab-header-td:last-child,.tab-row-td:last-child{
  border-right: none;
}
.tab-row{
  background: #fff;
  
}
.tab-row:nth-child(2n){
  background: #EDEDED;
}
.tab-row-td view{
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
}
.no-text{
  text-align: center;
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

声明表格中需要获取的数据格式
table.js

properties: {
    tabW: {
      // 表格每一列的宽度
      type: Array,
      value: []
    },
    tabHDate: {
      // 标题内容
      type: Array,
      value: []
    },
    rowData: {
      type: Array, // 表格数据
      value: []
    },
    rowKey: { // row属性
      type: Array,
      value: []
    }
  },

显示表格组件
在页面中的json中引入表格组件

"usingComponents": {
  "table": "/components/table/table"
}

向组件中传递所需要的属性

<table
 tabHDate="{{tabHDate}}"
 tabW="{{tabW}}"
 rowData="{{rowData}}"
 rowKey="{{rowKey}}"
/>

向表格组件传递相关的数据，

data: {
	tabHDate: ['日期', '入库时间', '出库时间', '操作人'], // 标题内容
    tabW: ['150', '210', '210', '140'],
    rowKey: ['time', 'enterTime', 'outTime', 'name'],
    rowData: [{
        time: '2020. 02.20',
        enterTime: '2020.02. 20 10:00',
        outTime: '2020.02. 20 10:00',
        name: '张三'
      },
      {
        time: '2020. 02.20',
        enterTime: '2020.02. 20 10:00',
        outTime: '2020.02. 20 10:00',
        name: '张三'
      },
      {
        time: '2020. 02.20',
        enterTime: '2020.02. 20 10:00',
        outTime: '2020.02. 20 10:00',
        name: '张三'
      }
    ],
}

最后的效果图