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

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

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

table.wxml

html 复制代码
<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

css 复制代码
.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

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,
      });
    },
  },
});

注意

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

结果

有图有真相

数据结构

表头

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

数据

js 复制代码
[
  {
    "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",
    ......
  }
]
相关推荐
咸鱼一号机几秒前
:global 是什么
前端
专业掘金几秒前
0425 手打基础丸
前端
五号厂房1 分钟前
Umi Max 如何灵活 配置多环境变量
前端
红尘散仙3 分钟前
六、WebGPU 基础入门——Vertex 缓冲区和 Index 缓冲区
前端·rust·gpu
南望无一3 分钟前
webpack性能优化和构建优化
前端·webpack
il4 分钟前
Deepdive into Tanstack Query - 2.0 Query Core 概览
前端·javascript
Shawn5906 分钟前
前端时间管理实践:从时间标准化到工程化封装
前端·javascript
H5开发新纪元7 分钟前
借助 GitHub Copilot 打造一个完美的 React 消息引用系统:从设计到实现的深度剖析
前端·react.js
前端没钱7 分钟前
Electron从入门到入门
前端
zhoouAAA8 分钟前
使用css变量实现前端无刷新切换主题
前端