微信小程序自定义组件 - table组件 - 支持第三方npm包使用
使用此组件需要依赖小程序基础库 2.2.2 版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。
实现了table的以下功能:
- 1.基础表格
- 2.带斑马纹表格
- 3.带间隔边框表格
- 4.自定义无数据的提示文案
- 5.自定义表格头样式
- 6.固定表头
- 7.表格横向滑动
- 8.自定义表格行和单元格样式
- 9.某一行被点击时会触发对外事件
一个简易的微信小程序 table组件诞生了。使用很简单,就是按照npm包和微信自定组件的用法使用。
- 安装组件:
npm install --save miniprogram-table-component
- 引入table自定义组件
在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置
{
"usingComponents": {
"table-view": "../../../miniprogram_npm/miniprogram-table-component"
}
}注意:npm包的路径。如果这里遇到找不到包的问题,可以查看下方的
微信小程序 npm 找到不到npm包的坑?
在wxml页面需要用到的地方使用,如下:
<table-view 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) } })
配置部分主要配置这么几个属性,分别是:
| 配置项 | 说明 | 类型 | 可选值 | 默认值 | 必填 |
|---|---|---|---|---|---|
| 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 | 行被点击时会触发该事件 | string | no |
配置相关代码🌰:
<table-view 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 login 登录不上需要将淘宝镜像改回npm的。还有一点需要注意的是,每次发布都需要更新 package.json 文件里的版本号。
组件开发完,引入使用的时候,发现npm的包,找不到了?这里比较坑的是小程序的npm有特殊的使用方式。
- 首先在项目的根目录初始化 npm:
npm init -f
- 然后安装对应的自定义组件包
npm install -production miniprogram-table-component
npm/cnpm/yarn add 均可
-
在微信开发者工具中,设置 —> 项目设置—> 勾选使用npm模块。
-
在微信开发者工具中,工具 —> 构建npm,构建完成会生成
miniprogram_npm文件夹,项目用到的npm包都在这里。 -
按照自己的使用路径,从
miniprogram_npm引入需要的包。