wechat-table用于在小程序内展示复杂表格
- 支持表头和表格body分组(自定义配置)
- 支持表格左右滑动(可自定义配置表格固定列)
- 不支持点击事件
- 取消headOption.bgColor属性,新增headOption.thStickyStyle和headOption.thStyle属性,用于设置表头单元格样式
- 新增bodyOption.tdStickyStyle和bodyOption.tdStyle属性,用于设置表格body单元格的样式
{
"usingComponents": {
"j-table": "wechat-table/j-table/index"
}
}
- 在page.wxml模板中使用j-table组件(传入option配置和表格数据data)
<j-table option="{{tableOption}}" data="{{tableData}}" />
参数 |
类型 |
描述 |
默认值 |
headOption |
object |
表头配置 |
- |
headOption.row |
[ [{ }] ] |
表头行配置:二维数组,每个元素为每一行的配置,每一行包含该行所有单元格的配置对象,单元格配置对象参见下方head接口 |
- |
headOption.thStickyStyle |
string |
表头固定单元格的样式 |
- |
headOption.thStyle |
string |
表头可滑动单元格的样式 |
- |
bodyOption |
object |
表格body配置 |
- |
bodyOption.row |
[ [{ }] ] |
表格body行配置:二维数组,每个元素为每一行的配置,每一行包含该行所有单元格的配置对象,单元格配置对象参见下方body接口 |
- |
bodyOption.tdStickyStyle |
string |
表格body固定单元格的样式 |
- |
bodyOption.tdStyle |
string |
表格body可滑动单元格的样式 |
- |
colOption |
number[] |
表格每列宽度设置(单位:px,这里填写ipnhoe6下合适的宽度值即可,该组件对其他不同类型设备已做了自适应)。 例:[80, 80, 100, 100]。注意:固定单元格的left属性须与这里配置的对应 |
- |
width |
number |
表格宽度(单位:px,这里填写ipnhoe6下合适的宽度值即可,该组件对其他不同类型设备已做了自适应)。 |
设备宽度 |
参数 |
类型 |
描述 |
默认值 |
value |
string |
表头名 |
'' |
rowspan |
number |
单元格占行数 |
1 |
colspan |
number |
单元格占列数 |
1 |
sticky |
boolean |
单元格是否固定 |
false |
left |
number |
左侧距离(单位:px),若为固定单元格,则需配置该值 |
0 |
参数 |
类型 |
描述 |
默认值 |
value |
string |
静态值展示,若设置了value,则直接展示value |
'' |
prop |
string |
动态值展示,若未设置value,则展示data[prop]的值(data为表格数据) |
'' |
rowspan |
number |
单元格占行数 |
1 |
colspan |
number |
单元格占列数 |
1 |
sticky |
boolean |
单元格是否固定 |
false |
left |
number |
左侧距离(单位:px),若为固定单元格,则需配置该值 |
0 |
isLastSticky |
boolean |
是否为该行最后一个固定单元格,该值若为true,会在单元格后显示边框阴影,增强视觉体验 |
false |
option: {
headOption: {
row: [
[{
value: '水果',
rowspan: 2,
sticky: true,
left: 0
}, {
value: '',
rowspan: 2,
sticky: true,
left: 120
}, {
value: '分类',
colspan: 2
}],
[{
value: '大果',
}, {
value: '小果',
}]
],
thStickyStyle: 'background-color:#007f80;',
thStyle: 'background-color:#428bca;'
},
bodyOption: {
row: [
[{
value: '',
prop: 'fruitName',
rowspan: 2,
sticky: true,
left: 0
}, {
value: '单价(元/斤)',
sticky: true,
isLastSticky: true,
left: 120
}, {
prop: 'bigFruitPrice'
}, {
prop: 'smallFruitPrice'
}],
[{
value: '存量(吨)',
sticky: true,
isLastSticky: true,
left: 120
}, {
prop: 'bigFruitStock'
}, {
prop: 'smallFruitStock'
}]
],
tdStickyStyle: 'background-color:#99ffff;',
tdStyle: 'background-color:#b3ff66;'
},
colOption: [120, 120, 150, 150]
}
[{
fruitName: '苹果',
bigFruitPrice: 7,
smallFruitPrice: 4,
bigFruitStock: 200,
smallFruitStock: 300
},
{
fruitName: '香蕉',
bigFruitPrice: 5,
smallFruitPrice: 3.5,
bigFruitStock: 600,
smallFruitStock: 1000
}
]
若使用上述配置,将呈现出如下页面(若图片加载不出来可以百度一下解决方案)
<iframe height=600 width=400 src="./images/wechat-table.gif">