微信小程序 -- 原生封装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",
    ......
  }
]
相关推荐
木木黄木木8 分钟前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言31 分钟前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家34 分钟前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya37 分钟前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me42 分钟前
react使用eventBus在不同模块间进行通信
前端·react.js
不老刘1 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
__不想说话__1 小时前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
橘猫云计算机设计1 小时前
基于springboot微信小程序的旅游攻略系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·微信小程序·毕业设计·旅游
一个小潘桃鸭1 小时前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟1 小时前
Combine知识点switchToLatest
前端