背景
针对上期打卡需求开发，这期需要以列表的形式展现打卡记录，但是微信小程序并没有表格组件，可能是官方考虑到,在前端开发中，表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用，针对这个问题，目前有两种解决方案：
- 1）内嵌 h5页面，（毕竟 h5 的
table组件众多） - 2）自定义
table组件（造轮子唄）
第一期打卡采用的原生开发的，老板期望第二期需求也能用原生，方便后期的维护。于是乎，我就开始了造轮子啦😂。需要table组件满足一下功能：
- 主要用于展示结构化数据；
- 支持自定义操作；
- 支持自定义表头样式；
- 支持固定表头，可左右滚动等功能。
table组件效果展示
miniprogram-table-component 小程序自定义table组件
使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
1.基础表格
image
2.带斑马纹表格
image
3.带间隔边框表格
image
4.自定义无数据的提示文案
image
5.自定义表格头样式
image
6.固定表头
image
7.表格横向滑动
image
8.自定义表格行和单元格样式
image
快速上手
一个简易的微信小程序 table组件诞生了。新鲜热乎的，前面看完了展现效果，接下来介绍使用。
自定义的 table 组件，使用很简单，就是按照npm包和微信自定义组件的方法使用。
1、安装和引入
- 安装组件：
npm install --save miniprogram-table-component
- 引入table自定义组件
在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置
{
"usingComponents": {
"table-view": "../../../miniprogram_npm/miniprogram-table-component"
}
}
注意：npm包的路径。如果这里遇到找不到包的问题，可以查看下方的
微信小程序 npm 找到不到npm包的坑？
2、使用table组件
在wxml页面需要用到的地方使用，如下：
<table
headers="{{tableHeader}}"
data="{{ row }}"
stripe="{{ stripe }}"
border="{{ border }}"
/>
在js页面需要用到的地方使用，如下：
Page({
/**
* 页面的初始数据
*/
data: {
tableHeader: [
{
prop: 'datetime',
width: 150,
label: '日期',
color: '#55C355'
},
{
prop: 'sign_in',
width: 152,
label: '上班时间'
},
{
prop: 'sign_out',
width: 152,
label: '下班时间'
},
{
prop: 'work_hour',
width: 110,
label: '工时'
},
{
prop: 'statusText',
width: 110,
label: '状态'
}
],
stripe: true,
border: true,
outBorder: true,
row: [
{
"id": 1,
"status": '正常',
"datetime": "04-01",
"sign_in_time": '09:30:00',
"sign_out_time": '18:30:00',
"work_hour": 8,
}, {
"id": 2,
"status": '迟到',
"datetime": "04-02",
"sign_in_time": '10:30:00',
"sign_out_time": '18:30:00',
"work_hour": 7,
}, {
"id": 29,
"status": '正常',
"datetime": "04-03",
"sign_in_time": '09:30:00',
"sign_out_time": '18:30:00',
"work_hour": 8,
}, {
"id": 318,
"status": '休息日',
"datetime": "04-04",
"sign_in_time": '',
"sign_out_time": '',
"work_hour": '',
}, {
"id": 319,
"status": '正常',
"datetime": "04-05",
"sign_in_time": '09:30:00',
"sign_out_time": '18:30:00',
"work_hour": 8,
}
],
msg: '暂无数据'
},
/**
* 点击表格一行
*/
onRowClick: function(e) {
console.log('e: ', e)
}
})
3、配置
配置部分主要配置这么几个属性，分别是：
| 配置项 | 说明 | 类型 | 可选值 | 默认值 | 必填 |
|---|---|---|---|---|---|
| headers | 表格头部标题、列宽度、列属性 | Array | {prop: 'datetime', width: 150, label: '日期'} |
[] | yes |
| data | 表格列表数据 | Array | [] | no | |
| stripe | 是否为斑马纹 | boolean | true/false | false | no |
| border | 是否有间隔线 | boolean | true/false | false | no |
| height | 纵向内容过多时，可选择设置高度固定表头。 | string | auto | no | |
| msg | 固定无数据情况，展示文案 | string | 暂无数据～ |
no | |
| header-row-class-name | 自定义表格头样式 | string | no | ||
| row-class-name | 自定义表格行样式 | string | no | ||
| cell-class-name | 自定义单元格样式 | string | no | ||
| bind:rowHandle | 行被点击时会触发该事件 | function | no |
配置相关代码🌰：
<table
header-row-class-name="header-class"
row-class-name="row-class"
cell-class-name="cell-class"
headers="{{tableHeader}}"
data="{{ row }}"
stripe="{{ stripe }}"
height="{{ height }}"
border="{{ border }}"
bind:rowClick="onRowClick"
bind:cellClick="onCellClick"
no-data-msg="{{ msg }}"
/>
header-row-class-name、row-class-name、cell-class-name是通过externalClasses支持外部样式，在父组件中控制表格的样式，externalClasses外部样式类, 官方说明。例子源码通过github地址查看。
实现一个自定义表格组件遇到的坑
npm 登录不上和发布不了的问题?
之前也发布过 npm 包，遗忘了 npm login 登录不上需要将淘宝镜像改回npm的。还有一点需要注意的是，每次发布都需要更新 package.json 文件里的版本号。
微信小程序 npm 找到不到npm包的坑？
组件开发完，引入使用的时候，发现npm的包，找不到了？这里比较坑的是小程序的npm有特殊的使用方式。
- 首先在项目的根目录初始化 npm:
npm init -f
- 然后安装对应的自定义组件包
npm install -production miniprogram-table-component
npm/cnpm/yarn add 均可
-
在微信开发者工具中，设置 —> 项目设置—> 勾选使用npm模块。
-
在微信开发者工具中，工具 —> 构建npm，构建完成会生成
miniprogram_npm文件夹，项目用到的npm包都在这里。 -
按照自己的使用路径，从
miniprogram_npm引入需要的包。
table组件源码
需求开发时间比较紧迫，也是尽量提高工作效率，把大块时间用来封装组件了。爱越折腾啊，也算是适当给自己的项目增加点难度，多一点追求，技术就会成长的更快。
参考
有哪些表格常用特性功能，该组件没有完善的，欢迎在下面评论区留言。
网友评论