微信小程序自定义组件——表单组件来了

鉴于前期打卡需求的发展，本期需要以列表的形式展示打卡记录，但微信小程序没有表单组件，可能是官方考虑到表单一直是前端开发中最复杂的组件之一，所以一直没有实现。没有现成的组件可以使用。为了解决这个问题，目前有两种解决方案：

组件表组件最初是为第一阶段打卡开发的，老板期望第二阶段的需求也可以是原生的，方便后期维护。于是，我开始做轮子，joy:表组件需要满足以下功能：

主要用于显示结构化数据；支持自定义操作；支持自定义页眉样式；支持固定页眉、左右滚动等功能。

table组件效果展示

迷你程序-表格-组件小程序定制表格组件

这个组件的使用依赖于applet基础库的2.2.2版本和开发者工具的npm构造。

1.基础表格

2.带斑马纹表格

3.带间隔边框表格

4.自定义无数据的提示文案

5.自定义表格头样式

6.固定表头

7.表格横向滑动

8.自定义表格行和单元格样式

快速上手

一个简单的微信小程序表组件诞生了。又新鲜又热。看完展示效果，我给大家介绍一下。自定义表组件使用起来非常简单，就是按照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: '日期'}[]yesdata表格列表数据Array[]nostripe是否为斑马纹booleantrue/falsefalsenoborder是否有间隔线booleantrue/falsefalsenoheight纵向内容过多时，可选择设置高度固定表头。stringautonomsg固定无数据情况，展示文案string暂无数据～noheader-row-class-name自定义表格头样式stringnorow-class-name自定义表格行样式stringnocell-class-name自定义单元格样式stringnobind:rowHandle行被点击时会触发该事件functionno

配置相关代码:chestnut:：

<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组件源码

• table组件npm地址
• github地址

需求开发时间比较紧迫，也是尽量提高工作效率，把大块时间用来封装组件了。爱越折腾啊，也算是适当给自己的项目增加点难度，多一点追求，技术就会成长的更快。