歷史總結：javascript

背景

針對上期打卡需求開發，這期須要以列表的形式展示打卡記錄，可是微信小程序並無表格組件，多是官方考慮到,在前端開發中，表格一直都是最複雜的組件之一就沒有實現吧。沒有現成的組件可使用，針對這個問題，目前有兩種解決方案：html

1）內嵌 h5頁面，（畢竟 h5 的 table組件 衆多）
2）自定義 table組件（造輪子唄）

第一期打卡採用的原生開發的，老闆指望第二期需求也能用原生，方便後期的維護。因而乎，我就開始了造輪子啦😂。須要table組件知足一下功能：前端

主要用於展現結構化數據；
支持自定義操做；
支持自定義表頭樣式；
支持固定表頭，可左右滾動等功能。

table組件效果展現

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

使用此組件須要依賴小程序基礎庫 2.2.2 版本，同時依賴開發者工具的 npm 構建。具體詳情可查閱官方 npm 文檔。git

1.基礎表格

2.帶斑馬紋表格

3.帶間隔邊框表格

4.自定義無數據的提示文案

5.自定義表格頭樣式

6.固定表頭

7.表格橫向滑動

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

快速上手

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

一、安裝和引入

安裝組件：

npm install --save miniprogram-table-component
複製代碼

引入table自定義組件

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

{
  "usingComponents": {
    "table-view": "../../../miniprogram_npm/miniprogram-table-component"
  }
}
複製代碼

注意：npm包的路徑。若是這裏遇到找不到包的問題，能夠查看下方的 微信小程序 npm 找到不到npm包的坑？json

二、使用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 init -f 
複製代碼

而後安裝對應的自定義組件包

npm install -production miniprogram-table-component
複製代碼

npm/cnpm/yarn add 都可

在微信開發者工具中，設置 —> 項目設置—> 勾選使用npm模塊。
在微信開發者工具中，工具 —> 構建npm，構建完成會生成 miniprogram_npm 文件夾，項目用到的npm包都在這裏。
按照本身的使用路徑，從 miniprogram_npm 引入須要的包。

table組件源碼

需求開發時間比較緊迫，也是儘可能提升工做效率，把大塊時間用來封裝組件了。愛折騰啊，也算是適當給本身的項目增長點難度，多一點追求，技術就會成長的更快。

微信小程序自定義組件 - 表格組件來啦

背景