微信小程序自定义组件|微信小程序自定义组件 - 表格组件来啦
背景
针对上期打卡需求开发，这期需要以列表的形式展现打卡记录，但是微信小程序并没有表格组件，可能是官方考虑到,在前端开发中，表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可以使用，针对这个问题，目前有两种解决方案：
- 1）内嵌 h5页面，（毕竟 h5 的
table组件众多） - 2）自定义
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自定义组件
{
"usingComponents": {
"table-view": "../../../miniprogram_npm/miniprogram-table-component"
}
}
注意：npm包的路径。如果这里遇到找不到包的问题，可以查看下方的2、使用table组件微信小程序 npm 找到不到npm包的坑？
在wxml页面需要用到的地方使用，如下：
在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 |
实现一个自定义表格组件遇到的坑 npm 登录不上和发布不了的问题?header-row-class-name、row-class-name、cell-class-name是通过externalClasses支持外部样式，在父组件中控制表格的样式，externalClasses外部样式类, 官方说明。例子源码通过github地址查看。
之前也发布过 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组件npm地址
- github地址
参考
- 微信小程序-自定义组件
- 微信小程序自定义table组件
- 你期待的微信小程序表格组件来
- 微信小程序-npm支持
【微信小程序自定义组件|微信小程序自定义组件 - 表格组件来啦】有哪些表格常用特性功能，该组件没有完善的，欢迎在下面评论区留言。
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）