針對(duì)上期打卡需求開發(fā)，這期需要以列表的形式展現(xiàn)打卡記錄，但是微信小程序并沒有表格組件，可能是官方考慮到,在前端開發(fā)中，表格一直都是最復(fù)雜的組件之一就沒有實(shí)現(xiàn)吧。沒有現(xiàn)成的組件可以使用，針對(duì)這個(gè)問題，目前有兩種解決方案：

table組件
table組件

第一期打卡采用的原生開發(fā)的，老板期望第二期需求也能用原生，方便后期的維護(hù)。于是乎，我就開始了造輪子啦:joy:。需要table組件滿足一下功能：

• 主要用于展示結(jié)構(gòu)化數(shù)據(jù)；
• 支持自定義操作；
• 支持自定義表頭樣式；
• 支持固定表頭，可左右滾動(dòng)等功能。

table組件效果展示

miniprogram-table-component 小程序自定義table組件

使用此組件需要依賴小程序基礎(chǔ)庫 2.2.2 版本，同時(shí)依賴開發(fā)者工具的 npm 構(gòu)建。

1.基礎(chǔ)表格

2.帶斑馬紋表格

3.帶間隔邊框表格

4.自定義無數(shù)據(jù)的提示文案

5.自定義表格頭樣式

6.固定表頭

7.表格橫向滑動(dòng)

8.自定義表格行和單元格樣式

快速上手

一個(gè)簡(jiǎn)易的微信小程序 table組件 誕生了。新鮮熱乎的，前面看完了展現(xiàn)效果，接下來介紹使用。 自定義的 table 組件，使用很簡(jiǎn)單，就是按照npm包和微信自定義組件的方法使用。

1、安裝和引入

• 安裝組件：

npm install --save miniprogram-table-component
復(fù)制代碼

• 引入table自定義組件

在頁面的 json 配置文件中添加 recycle-view 和 recycle-item 自定義組件的配置

{
  "usingComponents": {
    "table-view": "../../../miniprogram_npm/miniprogram-table-component"
  }
}
復(fù)制代碼

注意：npm包的路徑。如果這里遇到找不到包的問題，可以查看下方的 微信小程序 npm 找到不到npm包的坑？

2、使用table組件

在wxml頁面需要用到的地方使用，如下：

<table 
    headers="{{tableHeader}}" 
    data="{{ row }}" 
    stripe="{{ stripe }}"
    border="{{ border }}"
/>
復(fù)制代碼

在js頁面需要用到的地方使用，如下：

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    tableHeader: [
      {
        prop: 'datetime',
        width: 150,
        label: '日期',
        color: '#55C355'
      },
      {
        prop: 'sign_in',
        width: 152,
        label: '上班時(shí)間'
      },
      {
        prop: 'sign_out',
        width: 152,
        label: '下班時(shí)間'
      },
      {
        prop: 'work_hour',
        width: 110,
        label: '工時(shí)'
      },
      {
        prop: 'statusText',
        width: 110,
        label: '狀態(tài)'
      }
    ],
    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: '暫無數(shù)據(jù)'
  },

  /** 
   * 點(diǎn)擊表格一行
   */
  onRowClick: function(e) {
    console.log('e: ', e)
  }
})
復(fù)制代碼

3、配置

配置部分主要配置這么幾個(gè)屬性，分別是：

配置項(xiàng)	說明	類型	可選值	默認(rèn)值	必填
headers	表格頭部標(biāo)題、列寬度、列屬性	Array	{prop: 'datetime', width: 150, label: '日期'}	[]	yes
data	表格列表數(shù)據(jù)	Array		[]	no
stripe	是否為斑馬紋	boolean	true/false	false	no
border	是否有間隔線	boolean	true/false	false	no
height	縱向內(nèi)容過多時(shí)，可選擇設(shè)置高度固定表頭。	string		auto	no
msg	固定無數(shù)據(jù)情況，展示文案	string		暫無數(shù)據(jù)～	no
header-row-class-name	自定義表格頭樣式	string			no
row-class-name	自定義表格行樣式	string			no
cell-class-name	自定義單元格樣式	string			no
bind:rowHandle	行被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件	function			no

配置相關(guān)代碼: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 }}"
/> 
復(fù)制代碼

header-row-class-name 、 row-class-name 、 cell-class-name 是通過externalClasses支持外部樣式，在父組件中控制表格的樣式， externalClasses外部樣式類, 官方說明 。例子源碼通過 github地址 查看。

實(shí)現(xiàn)一個(gè)自定義表格組件遇到的坑

npm 登錄不上和發(fā)布不了的問題?

之前也發(fā)布過 npm 包，遺忘了 npm login 登錄不上需要將淘寶鏡像改回npm的。還有一點(diǎn)需要注意的是，每次發(fā)布都需要更新 package.json 文件里的版本號(hào)。

微信小程序 npm 找到不到npm包的坑？

組件開發(fā)完，引入使用的時(shí)候，發(fā)現(xiàn)npm的包，找不到了？這里比較坑的是小程序的npm有特殊的使用方式。

• 首先在項(xiàng)目的根目錄初始化 npm:

npm init -f 
復(fù)制代碼

• 然后安裝對(duì)應(yīng)的自定義組件包

npm install -production miniprogram-table-component
復(fù)制代碼

npm/cnpm/yarn add 均可

• 在微信開發(fā)者工具中，設(shè)置 —> 項(xiàng)目設(shè)置—> 勾選使用npm模塊。

• 在微信開發(fā)者工具中，工具 —> 構(gòu)建npm，構(gòu)建完成會(huì)生成 miniprogram_npm 文件夾，項(xiàng)目用到的npm包都在這里。

• 按照自己的使用路徑，從 miniprogram_npm 引入需要的包。

table組件源碼

• table組件npm地址
• github地址

需求開發(fā)時(shí)間比較緊迫，也是盡量提高工作效率，把大塊時(shí)間用來封裝組件了。愛越折騰啊，也算是適當(dāng)給自己的項(xiàng)目增加點(diǎn)難度，多一點(diǎn)追求，技術(shù)就會(huì)成長(zhǎng)的更快。