1:安装
npm install --save miniprogram-table-component
2:引用在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置
{
"usingComponents": {
"table-view": "../../../miniprogram_npm/miniprogram-table-component"
}
}
3:在wxml 中使用
<table
headers="{{tableHeader}}"
data="{{ row }}"
stripe="{{ stripe }}"
border="{{ border }}"
/>
4:js中
Page({
/**
* 页面的初始数据
*/
data: {
tableHeader: [],
stripe: true,
border: true,
outBorder: true,
row: [],
msg: '暂无数据'
},
/**
* 点击表格一行
*/
onRowClick: function(e) {
console.log('e: ', e)
}
})
5:相关table配置
<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 }}"
/>