微信小程序 -- 原生封装table

最近菜鸟做微信小程序的一个查询功能，需要展示excel里面的数据，但是菜鸟找了一圈，也没发现什么组件库有table，毕竟手机端好像确实不太适合做table！

菜鸟只能自己封装一个table了，当然菜鸟就是简单的封装，只是为自己留一个记录，免得后面要实现类似的东西去翻代码，对大佬们肯定是没啥帮助，但是对小白可能有点启发！

table.wxml

<view class="table-container">
  <scroll-view 
    scroll-x="true" 
    scroll-y="true" 
    class="table-body"
    style="max-height: {{height}}"
    enhanced="true"
    show-scrollbar="false"
  >
    <view class="table">
      <!-- 固定表头 -->
      <view class="table-header">
        <view class="tr">
          <block wx:for="{{columns}}" wx:key="index">
            <view
              class="th"
              style="min-width: {{item.width || '300rpx'}};width: {{item.width || '300rpx'}};"
            >
              {{ item.name }}
            </view>
          </block>
        </view>
      </view>

      <!-- 表格内容 -->
      <view class="table-rows">
        <block wx:for="{{listData}}" wx:key="item">
          <view class="tr borderbtm">
            <block wx:for="{{columns}}" wx:for-item="cell" wx:key="cell"> 
              <view
                class="td"
                style="min-width: {{cell.width || '300rpx'}};width: {{cell.width || '300rpx'}};"
              >
                {{item[cell.key]}}
              </view>
            </block>
          </view>
        </block>
      </view>
    </view>
  </scroll-view>
</view>

table.wxss

.table-container {
  width: 100%;
}

.table-body {
  width: 100%;
}

.table {
  width: fit-content;
  min-width: 100%;
}

.table-header {
  position: sticky; //position: sticky 是相对于最近的可滚动祖先元素，也就是 scroll-view.table-body 元素
  top: 0;
  z-index: 1;
  background: #fff;
}

.tr {
  display: flex;
  white-space: nowrap;
}

.th,
.td {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 20rpx;
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
  user-select: text; /* 添加这行使文本可选择 */
}

.td {
  -webkit-user-select: text; /* 兼容性处理 */
  cursor: text; /* 显示文本选择光标 */
}

.th {
  font-weight: bold;
  background-color: #f8f8f8;
}

.borderbtm {
  border-bottom: 1px solid #eee;
}

注意

table.js

Component({
  properties: {
    listData: {
      type: Array,
      value: "",
    },
    columns: {
      type: Array,
      value: "",
    },
    height: {
      type: String,
      value: "",
    },
  },

  lifetimes: {
    attached() {
      const windowInfo = wx.getWindowInfo();
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
      const headerHeight = menuButtonInfo.bottom + 40;

      const tableHeight = `${(windowInfo.windowHeight - headerHeight) / 2}px`;
      this.setData({
        height: tableHeight,
      });
    },
  },
});

注意

菜鸟这里是正好两个表要一上一下对半占屏幕，要是不是，可以不要计算这里的部分，直接靠传参设置！

结果

有图有真相

数据结构

表头

 b2_header_title: [
  { name: "客户批次号", key: "customerBatchNum" },
  { name: "项目批次号", key: "projectBatchNum" },
  { name: "执行合同编号", key: "executionContractNum", width: "500rpx" },
  { name: "执行合同名称", key: "executionContractName", width: "1000rpx" },
  ……
]

数据

[
  {
    "id": "2441568",
    "customerBatchNum": "SP2410303188",
    "projectBatchNum": "BC2024110238",
    "executionContractNum": "BN2401105NJ01S02N2",
    "executionContractName": "xxxxx",
    "uploadTime": "2025-04-01 14:31:18",
    ……
  },
  {
    "id": "2441570",
    "customerBatchNum": "SP2410303178",
    "projectBatchNum": "BC2024110239",
    "executionContractNum": "BN2401105NJ01S02N2",
    "executionContractName": "xxxxxxx",
    "uploadTime": "2025-04-01 14:32:18",
    ……
  }
]