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