微信小程序自定義組件 - 表格組件來啦
針對上期打卡需求開發，這期需要以列表的形式展現打卡記錄，但是微信小程序并沒有表格組件，可能是官方考慮到,在前端開發中，表格一直都是最復雜的組件之一就沒有實現吧。沒有現成的組件可以使用，針對這個問題，目前有兩種解決方案：
table組件 table組件
第一期打卡采用的原生開發的，老板期望第二期需求也能用原生，方便后期的維護。于是乎，我就開始了造輪子啦:joy:。需要table組件滿足一下功能：
- 主要用于展示結構化數據；
- 支持自定義操作；
- 支持自定義表頭樣式；
- 支持固定表頭，可左右滾動等功能。
table組件效果展示
miniprogram-table-component 小程序自定義table組件
使用此組件需要依賴小程序基礎庫 2.2.2 版本，同時依賴開發者工具的 npm 構建。
1.基礎表格
2.帶斑馬紋表格
3.帶間隔邊框表格
4.自定義無數據的提示文案
5.自定義表格頭樣式
6.固定表頭
7.表格橫向滑動
8.自定義表格行和單元格樣式
快速上手
一個簡易的微信小程序 table組件 誕生了。新鮮熱乎的，前面看完了展現效果，接下來介紹使用。 自定義的 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({
/**
* 頁面的初始數據
*/
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)
}
})
復制代碼
3、配置
配置部分主要配置這么幾個屬性，分別是：
| 配置項 | 說明 | 類型 | 可選值 | 默認值 | 必填 |
|---|---|---|---|---|---|
| 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 |
配置相關代碼: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 是通過externalClasses支持外部樣式，在父組件中控制表格的樣式， externalClasses外部樣式類, 官方說明 。例子源碼通過 github地址 查看。
實現一個自定義表格組件遇到的坑
npm 登錄不上和發布不了的問題?
之前也發布過 npm 包，遺忘了 npm login 登錄不上需要將淘寶鏡像改回npm的。還有一點需要注意的是，每次發布都需要更新 package.json 文件里的版本號。
微信小程序 npm 找到不到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組件源碼
- table組件npm地址
- github地址
需求開發時間比較緊迫，也是盡量提高工作效率，把大塊時間用來封裝組件了。愛越折騰啊，也算是適當給自己的項目增加點難度，多一點追求，技術就會成長的更快。
