針(zhen)(zhen)對上期打卡(ka)需(xu)求開發(fa)，這期需(xu)要以列表的(de)形式展(zhan)現打卡(ka)記(ji)錄，但(dan)是(shi)(shi)微信小程序并沒(mei)有(you)表格組件(jian)，可能是(shi)(shi)官方考慮到(dao),在前端開發(fa)中，表格一直都是(shi)(shi)最復雜(za)的(de)組件(jian)之一就沒(mei)有(you)實現吧。沒(mei)有(you)現成的(de)組件(jian)可以使用，針(zhen)(zhen)對這個問(wen)題，目前有(you)兩種解決方案：
table組件 table組件
第一期打卡采用的原生(sheng)開(kai)發(fa)的，老板期望第二(er)期需求也(ye)能用原生(sheng)，方便后期的維護。于是(shi)乎，我就開(kai)始了(le)造輪子啦:joy:。需要table組件滿(man)足(zu)一下(xia)功(gong)能：
miniprogram-table-component 小(xiao)程序自定義(yi)table組件(jian)
使用(yong)此組件(jian)需(xu)要(yao)依(yi)(yi)賴小程(cheng)序基礎庫 2.2.2 版(ban)本，同時依(yi)(yi)賴開(kai)發者工具的(de) npm 構建。
一(yi)個(ge)簡易的微信(xin)小程序 table組(zu)(zu)件 誕(dan)生了(le)(le)。新鮮熱乎的，前面(mian)看(kan)完了(le)(le)展現效(xiao)果，接(jie)下來介(jie)紹使(shi)用(yong)(yong)。 自(zi)定義的 table 組(zu)(zu)件，使(shi)用(yong)(yong)很簡單，就是按照npm包和(he)微信(xin)自(zi)定義組(zu)(zu)件的方法使(shi)用(yong)(yong)。
npm install --save miniprogram-table-component 復制代碼
在頁面的(de) json 配(pei)置(zhi)文件(jian)中添加 recycle-view 和 recycle-item 自(zi)定義組件(jian)的(de)配(pei)置(zhi)
{
"usingComponents": {
"table-view": "../../../miniprogram_npm/miniprogram-table-component"
}
}
復制代碼
注(zhu)意：npm包(bao)的(de)路徑。如(ru)果這里遇到(dao)找不到(dao)包(bao)的(de)問題(ti)，可以查看(kan)下方的(de) 微(wei)信小程(cheng)序 npm 找到(dao)不到(dao)npm包(bao)的(de)坑(keng)？
在wxml頁面需要用到的地方使用，如下：
<table
headers="{{tableHeader}}"
data="{{ row }}"
stripe="{{ stripe }}"
border="{{ border }}"
/>
復制代碼
在js頁(ye)面需(xu)要用到(dao)的(de)地方(fang)使用，如下：
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)
}
})
復制代碼
配置(zhi)部分主要配置(zhi)這么幾個屬性(xing)，分別是(shi)：
| 配置項 | 說明 | 類型 | 可選值 | 默認值 | 必填 |
|---|---|---|---|---|---|
| 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 |
配(pei)置相關(guan)代碼: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 是通過(guo)externalClasses支持(chi)外部樣(yang)式(shi)(shi)，在父組件(jian)中控(kong)制(zhi)表(biao)格的樣(yang)式(shi)(shi)， externalClasses外部樣(yang)式(shi)(shi)類, 官方說明 。例子源碼(ma)通過(guo) 查看。
之前也(ye)發(fa)布過 npm 包，遺忘了 npm login 登錄不上需要(yao)將淘寶鏡像(xiang)改回npm的。還有(you)一點需要(yao)注意的是，每次發(fa)布都需要(yao)更新(xin) package.json 文(wen)件里的版本號。
組件(jian)開發完，引入使(shi)用的(de)時候，發現npm的(de)包(bao)，找不到了？這里比較坑的(de)是小(xiao)程序的(de)npm有特殊的(de)使(shi)用方式。
npm init -f 復制代碼
npm install -production miniprogram-table-component 復制代碼
npm/cnpm/yarn add 均可
在微(wei)信開發者(zhe)工(gong)具中，設(she)置(zhi) —> 項目設(she)置(zhi)—> 勾選使用npm模塊。
在(zai)微(wei)信開(kai)發(fa)者(zhe)工(gong)具中，工(gong)具 —> 構建(jian)npm，構建(jian)完成會生成 miniprogram_npm 文件夾，項目用(yong)到(dao)的npm包(bao)都在(zai)這里。
按照自己的(de)使用路徑，從 miniprogram_npm 引入需要的(de)包。
需求開發時間比(bi)較緊迫，也是(shi)盡量提高工作效率，把大塊(kuai)時間用(yong)來封裝組(zu)件(jian)了。愛越折騰啊，也算是(shi)適當給自己(ji)的(de)(de)項目增加(jia)點(dian)難度，多一點(dian)追(zhui)求，技(ji)術就會成長(chang)的(de)(de)更快(kuai)。
