最近菜鳥做微信小程序的一個查詢功能，需要展示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"><viewclass="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"> <viewclass="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",……}
]