微信小程序自定义组件 - 表格组件来啦

历史总结：

• 微信小程序性能优化实践
• 经过微信小程序来实现 “钉钉打卡”
• 记一次微信小程序项目分包，以及分包预下载
• 微信小程序实战

背景

针对上期打卡需求开发，这期须要以列表的形式展示打卡记录，可是微信小程序并无表格组件，多是官方考虑到,在前端开发中，表格一直都是最复杂的组件之一就没有实现吧。没有现成的组件可使用，针对这个问题，目前有两种解决方案：

• 1）内嵌 h5页面，（毕竟 h5 的 table组件 众多）
• 2）自定义 table组件（造轮子唄）

第一期打卡采用的原生开发的，老板指望第二期需求也能用原生，方便后期的维护。因而乎，我就开始了造轮子啦😂。须要table组件知足一下功能：

• 主要用于展现结构化数据；
• 支持自定义操做；
• 支持自定义表头样式；
• 支持固定表头，可左右滚动等功能。

table组件效果展现

miniprogram-table-component 小程序自定义table组件

使用此组件须要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

1.基础表格

2.带斑马纹表格

3.带间隔边框表格

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

5.自定义表格头样式

6.固定表头

7.表格横向滑动

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

快速上手

一个简易的微信小程序 table组件诞生了。新鲜热乎的，前面看完了展示效果，接下来介绍使用。 自定义的 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包的坑？

二、使用table组件

在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	行被点击时会触发该事件	function			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 包，遗忘了 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地址

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

参考

• 微信小程序-自定义组件
• 微信小程序自定义table组件
• 你期待的微信小程序表格组件来
• 微信小程序-npm支持