背景

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

• 1）內(nèi)嵌 h5頁面需忿，（畢竟 h5 的 table組件 眾多）
• 2）自定義 table組件（造輪子唄）

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

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

table組件效果展示

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

使用此組件需要依賴小程序基礎(chǔ)庫 2.2.2 版本，同時(shí)依賴開發(fā)者工具的 npm 構(gòu)建伐憾。具體詳情可查閱官方 npm 文檔赫模。

1.基礎(chǔ)表格

image

2.帶斑馬紋表格

image

3.帶間隔邊框表格

image

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

image

5.自定義表格頭樣式

image

6.固定表頭

image

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

image

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

image

快速上手

一個(gè)簡易的微信小程序 table組件誕生了瀑罗。新鮮熱乎的，前面看完了展現(xiàn)效果斩祭，接下來介紹使用。
自定義的 table 組件摧玫，使用很簡單，就是按照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({
  /**
   * 頁面的初始數(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)
  }
})

3聂使、配置

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

配置相關(guān)代碼??：

<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地址查看森逮。

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

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

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

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

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

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

npm init -f 

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

npm install -production miniprogram-table-component

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ì)成長的更快健提。

參考

• 微信小程序-自定義組件
• 微信小程序自定義table組件
• 你期待的微信小程序表格組件來
• 微信小程序-npm支持

有哪些表格常用特性功能，該組件沒有完善的私痹，歡迎在下面評論區(qū)留言统刮。