常规表格
// 页面使用
注: 表格头thead数据里没有写width属性时, 其width值按100%平均各个列, 比如 5列, 列宽度: 100/5=20%
默认表格+数据自定义样式
// 页面使用
默认表格+数据自定义样式
// 页面使用
默认表格+特殊表头+自定义数据样式
// 页面使用
加工能力", "width": "17%", fixed: true },
{
"text": "加工量", "width": "33%", fixed: true,
"children": [
{ "text": "本年累计", "width": "50%", "children": [] },
{ "text": "同比变化", "width": "50%", "children": [] }
]
},
{
"text": "开工率", "width": "33%",
"children": [
{ "text": "本年累计", "width": "50%", "children": [] },
{ "text": "同比变化", "width": "50%", "children": [] }
]
},
],
// 表格头数据
thead: [ // , fixed: true
{ prop: 'col1', label: '指标名称', width: '16%' },
{ prop: 'col2', label: '本年累计', width: '16%' },
{ prop: 'col3', label: '去年同期', width: '17%' },
{ prop: 'col4', label: '同比变化', width: '17%' },
{ prop: 'col5', label: '全年预算', width: '17%' },
{ prop: 'col6', label: '预算完成', width: '17%' }
]
// 表格体数据
tbody: [
{ "id": 1, "col1": "总收入", "col2": "999.92", "col3": "", "col4": "0%", "col5": "999.92", "col6": "84%" },
{ "id": 2, "col1": "利润总额", "col2": "999.92", "col3": "999.92", "col4": "0%", "col5": "999.92", "col6": "84%" },
{ "id": 3, "col1": "净利润", "col2": "999.92", "col3": "999.92", "col4": "", "col5": "999.92", "col6": "84%" },
{ "id": 4, "col1": "ROE", "col2": "-4.02%", "col3": "4.02%", "col4": "-0.18ppt", "col5": "8.16%", "col6": "0.18ppt" }
]
默认表格+特殊表头+横向滚动+列锁定+自定义数据样式
// 页面使用
加工能力", "width": "21%", fixed: true, },
{
"text": "加工量", "width": "33%",
"children": [
{ "text": "本年累计", "width": "50%", "children": [] },
{ "text": "同比变化", "width": "50%", "children": [] }
]
},
{
"text": "开工率", "width": "33%",
"children": [
{ "text": "本年累计", "width": "50%", "children": [] },
{ "text": "同比变化", "width": "50%", "children": [] }
]
},
]
// 表格头数据
thead: [
{ prop: 'col1', label: '指标名称', width: '22%', fixed: true },
{ prop: 'col2', label: '本年累计', width: '22%', fixed: true },
{ prop: 'col3', label: '去年同期', width: '17%' },
{ prop: 'col4', label: '同比变化', width: '17%' },
{ prop: 'col5', label: '全年预算', width: '17%' },
{ prop: 'col6', label: '预算完成', width: '17%' }
]
// 表格体数据
tbody: [
{ "id": 1, "col1": "总收入", "col2": "999.92", "col3": "", "col4": "0%", "col5": "999.92", "col6": "99%" },
{ "id": 2, "col1": "XX总额", "col2": "999.92", "col3": "999.92", "col4": "0%", "col5": "999.92", "col6": "99%" },
{ "id": 3, "col1": "净XX", "col2": "999.92", "col3": "999.92", "col4": "", "col5": "999.92", "col6": "84%" },
{ "id": 4, "col1": "RXX", "col2": "-4.02%", "col3": "4.02%", "col4": "-0.18ppt", "col5": "8.16%", "col6": "0.18ppt" }
]
树形表格-合计
// 页面使用
多行、列表格头-数据格式
- id 必需有,值不重复
- col1, col2, ... 对应列名称
- level 必需有
[
{
"id": 39, "col1": "资产总计", "col2": "7,359", "col3": "100%", "level": 1,
"nodes": [ {"id": 391, "col1": "xxx", "col2": "1,359", "col3": "50%", "level": 2}, {...} ],
},
{
"id": 40, "col2": "资产总计", "col2": "7,359", "col3": "100%", "level": 1,
"nodes": [ {"id": 401, "col1": "yyy", "col2": "1,359", "col3": "50%", "level": 2}, {...} ],
},
...
]
数据示例01
- col1, col2, col3, col4, col5 对应列的内容, css样式分两种模式设置
-
css设置1:
appendStyle: "html-style表达式"
通过appendStyle设置整个行的样式;appendStyleByIndex: ["单元格1.html-style表达式", "单元格2.html-style表达式", ...]
通过appendStyleByIndex设置行中个别单元格的样式; 注: 无指定给空字符串即可.
-
css设置2:
- 在数据里直接写html代码, 包括style样式.
例如:"col2": "856"
- 在数据里直接写html代码, 包括style样式.
-
/*
如下内容为表格所需要的数据
*/
{
"id": 41,
"col1": "货币资金",
"col2": "![\"\"](\"https://cofco001-1308084433.cos.ap-beijing.myqcloud.com/image/miniprogram/Icon/redArrow.png\")
856",
"col3": "![\"\"/](\"https://cofco001-1308084433.cos.ap-beijing.myqcloud.com/image/miniprogram/Icon/greenArrow.png\")
-12%",
"col4": "686",
"col5": "25%",
"level": 3,
"appendStyle": "color:#08A3EB; text-align: center; font-size: 12px; background-color:#ffffff;",
"appendStyleByIndex": ["", "color:#ff0000;", "color:#0000FF;"],
"nodes": []
},
合计行
因合计位置不固定, 可放表格体第1行 或是 最后一行, 所以合计行根据数据的位置排序
注: id: -1 必须写
[
{ id: -1, orgName: "合计1", orgCode: 1, moduleName: 0, ytd: 0, drawdown: 0, orgSeq: 1, ytdDod: 0 },
...
{ "orgName": "XX糖业", "orgCode": "C1006999", "moduleName": "dazong", "ytd": 0, "drawdown": 0, "orgSeq": 6, "ytdDod": -17 },
]
排序-重置功能
横向滚动, 列头锁定, 角标+提示功能
表格-数据示例
// 表格头数据
[
{ label: '指标名称', prop: 'col1', width: '35%', color: '#fff' },
{ label: '本年当月', prop: 'col2', width: '17%', color: '#fff' },
{ label: '当月同比', prop: 'col3', width: '17%', color: '#fff' },
{ label: '本年累计', prop: 'col4', width: '17%', color: '#fff' },
{ label: '去年同期', prop: 'col5', width: '17%', color: '#fff' },
{ label: '同比变化', prop: 'col6', width: '17%', color: '#fff' },
{ label: '全年预算', prop: 'col7', width: '17%', color: '#fff' },
{ label: '预算完成', prop: 'col8', width: '17%', color: '#fff' },
]
// 表格体数据
[
{ ... },
{
"level": 1,
"id": "465568",
"col1": "二、营业总成本",
"col2": "731",
"col3": "19%",
"col4": "2,260",
"col5": "2,071",
"col6": "9%",
"col7": "6,763",
"col8": "33%",
"col9": "613.03",
"nodes": [ ... ],
"appendStyleByIndex": ["color:#3583D8"],
"isCellClick": [null, null, true]
},
{ ... },
{ ... },
{ ... }
]
/* 角标-提示框css样式 */
.dialog {
width: 120px;
line-height: 1.7;
font-size: 13px;
color: #333333;
position: absolute;
background: #ffffff;
padding: 10px;
box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.5);
border-radius: 5px;
text-align: left;
z-index: 999;
}
data: {
...
dialog: {
show: false,
tooltip: null,
scrollTop: null,
},
},
methods: {
// 单元格点击回调事件
eventCell(e) {
this.getBadge('2023年1月', e)
},
// 获取提示框显示内容 以及 提示框定位计算
getBadge(time, e) {
api2.getCofcoGroupTooltip().then(res => {
const { offsetTop: eHeight } = e.detail.currentTarget
const { x, y } = e.detail.detail
let scrollTop = this.data.dialog.top
for (let i in res) {
if (i == time) {
const _tooltip = {
isTriangleTarget: `同口径同期：${res[i].correspondingPeriod}
同口径同比：${res[i].yearBasis}`
}
setTimeout(() => {
// 提示框 首次定位计算(只算一次即可)
if (scrollTop == null) {
let query = wx.createSelectorQuery().in(this)
query.select('.component-page').boundingClientRect()
query.exec(res => {
if (res && res[0]) { scrollTop = res[0].top }
if (x && y) {
this.setData({
dialog: {
tooltip: _tooltip.isTriangleTarget2,
show: true,
left: x,
top: (scrollTop + y) / 2 - (eHeight / 2),
}
})
}
})
}
else {
this.setData({ "dialog.show": true });
}
}, 300)
}
}
})
},
onFocus(e) {
this.setData({"dialog.show": true})
},
onBlur(e) {
this.setData({"dialog.show": false})
}
}
注: 组件页面的最外层的class必须含有
page-container名称, 如下图所求