miniprogram-table-component：微信小程序自定义表格组件（自定义第三方组件），适用于小程序原生开发

# miniprogram-table-component 微信小程序自定义组件 - table组件 - 支持第三方npm包使用 > 使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅[官方 npm 文档](https://github.com/wechat-miniprogram/miniprogram-custom-component/blob/master/README.md)。 ## table组件 实现了table的以下功能： - 1.基础表格 - 2.带斑马纹表格 - 3.带间隔边框表格 - 4.自定义无数据的提示文案 - 5.自定义表格头样式 - 6.固定表头 - 7.表格横向滑动 - 8.自定义表格行和单元格样式 - 9.某一行被点击时会触发对外事件 ## 快速上手 一个简易的微信小程序 `table组件`诞生了。使用很简单，就是按照npm包和微信自定组件的用法使用。 ### 1、安装和引入 - 安装组件： ``` npm install --save miniprogram-table-component ``` - 引入table自定义组件 在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置 ```json { "usingComponents": { "table-view": "../../../miniprogram_npm/miniprogram-table-component" } } ``` > 注意：npm包的路径。如果这里遇到找不到包的问题，可以查看下方的 `微信小程序 npm 找到不到npm包的坑？` ### 2、使用table组件 在wxml页面需要用到的地方使用，如下： ```html <table headers="{{tableHeader}}" data="{{ row }}" stripe="{{ stripe }}" border="{{ border }}" /> ``` 在js页面需要用到的地方使用，如下： ```javascript 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 | 行被点击时会触发该事件 | string | | | no 配置相关代码🌰： ```javascript <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外部样式类, 官方说明](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html)。例子源码通过[github地址](https://github.com/habc0807/miniprogram-table-component)查看。 ## 实现一个自定义表格组件遇到的坑 ### 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` 引入需要的包。 ## 源码 - [npm地址](https://www.npmjs.com/package/miniprogram-table-component) - [github地址](https://github.com/habc0807/miniprogram-table-component)