- 支持表头和表格body分组(自定义配置)
- 支持表格左右滑动(可自定义配置表格固定列)
- 不支持点击事件
- 取消headOption.bgColor属性,新增headOption.thStickyStyle和headOption.thStyle属性,用于设置表头单元格样式
- 新增bodyOption.tdStickyStyle和bodyOption.tdStyle属性,用于设置表格body单元格的样式
-
下载包之后,使用微信开发者工具构建npm
-
在page.json中引入j-table自定义组件
{
"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
}
]