79 lines
4.6 KiB
JSON
79 lines
4.6 KiB
JSON
{
|
||
"slug": "summaryrowtable",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 汇总表：原生 table 骨架加 tfoot 汇总行，summary 给出各列的聚合方式，由组件算出合计行。",
|
||
"usage": [
|
||
"summary 是 { 列 key: 运算名 } 的对象，取值为 sum / avg / max / min / count 五种，模板只在 summary[c.key] 有值时才输出单元格（frameworks/SummaryRowTable.vue3.vue:12,31-39）。",
|
||
"avg 结果固定 toFixed(1) 保留一位小数，sum/max/min 是原始数值、count 返回条数（frameworks/SummaryRowTable.vue3.vue:35-38）。",
|
||
"聚合前先把该列映射成 Number(d[key]) || 0，非数字或缺失一律当 0 参与计算，不会因为脏数据算出 NaN（frameworks/SummaryRowTable.vue3.vue:32）。",
|
||
"labelKey 决定汇总行哪一格显示 labelText：命中的单元格额外挂 kole-sum-label 类变品牌色，默认 labelKey='name'、labelText='合计 / 平均'（frameworks/SummaryRowTable.vue3.vue:11,24-25）。",
|
||
"data 为空数组时 compute 直接返回空串，汇总行保留但整行为空，不会抛错（frameworks/SummaryRowTable.vue3.vue:33）。"
|
||
],
|
||
"bestPractices": [
|
||
"列的显示名取 columns 里的 title、取值取 key，两者要成对给；data 里的字段名必须与 key 完全一致，否则该列聚合恒为 0（frameworks/SummaryRowTable.vue3.vue:3,6,32）。",
|
||
"给列加 pos 阈值后，单元格只要 row[c.key] >= c.pos 就会被 cellClass 标成 is-pos（配合 CSS 变成功绿色），适合标「超预期」这类正向数值（frameworks/SummaryRowTable.vue3.vue:28-30）。",
|
||
"labelKey 那一列不参与聚合，即使 summary 里也写了它，模板仍优先输出 labelText（frameworks/SummaryRowTable.vue3.vue:11-12）。",
|
||
"需要 count 这类非数值列时直接写 'count'：它数的是行数而非字段之和，字段值缺失也照样计数（frameworks/SummaryRowTable.vue3.vue:38）。"
|
||
],
|
||
"a11y": [
|
||
"用真实的 <table>/<thead>/<tbody>/<tfoot> 搭结构，表头是 <th>、汇总行在 tfoot，表格语义对读屏器是完整的（frameworks/SummaryRowTable.vue3.vue:2,3,9）。",
|
||
"表头是裸 <th>，没有 scope=\"col\"，列多的表建议业务侧补上，读屏器才能把单元格与列头对上（frameworks/SummaryRowTable.vue3.vue:3）。",
|
||
"汇总行只靠底色与加粗区分（.kole-sumrow 有 border-top 与品牌底），没有 caption 或 aria-label 说明这是合计行（SummaryRowTable.css:7）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 3 端载体只有 5 个 props（data / columns / summary / labelKey / labelText），无 emit、无插槽；汇总结果是组件内部按 summary 算好后渲染进 tfoot。",
|
||
"table": [
|
||
{
|
||
"name": "columns",
|
||
"type": "Array",
|
||
"desc": "列配置（frameworks/SummaryRowTable.vue3.vue:3）"
|
||
},
|
||
{
|
||
"name": "data",
|
||
"type": "Array",
|
||
"desc": "数据源（frameworks/SummaryRowTable.vue3.vue:5）"
|
||
},
|
||
{
|
||
"name": "labelKey",
|
||
"type": "String",
|
||
"desc": "标签字段（frameworks/SummaryRowTable.vue3.vue:11）"
|
||
},
|
||
{
|
||
"name": "labelText",
|
||
"type": "String",
|
||
"desc": "标签文本（frameworks/SummaryRowTable.vue3.vue:12）"
|
||
},
|
||
{
|
||
"name": "summary",
|
||
"type": "Object",
|
||
"desc": "汇总配置（frameworks/SummaryRowTable.vue3.vue:12）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/SummaryRowTable.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/SummaryRowTable.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"summaryrowtable-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/SummaryRowTable.vue3.vue:20-26 defineProps 声明 data/columns/summary/labelKey/labelText 五项，含 labelText 默认值。",
|
||
"依据 frameworks/SummaryRowTable.vue3.vue:31-40 compute 支持 sum/avg/max/min/count 五种，未知类型返回空串。",
|
||
"依据 frameworks/SummaryRowTable.vue3.vue:32 Number(d[key]) || 0 的兜底口径。",
|
||
"依据 frameworks/SummaryRowTable.vue3.vue:28-30 cellClass 依 col.pos 与 row[c.key] 比较得出 is-pos。",
|
||
"依据 frameworks/SummaryRowTable.vue3.vue:43 样式外链 SummaryRowTable.css；7 行定义 .kole-sumrow 的视觉。",
|
||
"契约声明的驱动维度（aggregate / position / fixed）属设计词汇层，未作为 prop 写入本页；其中 position 在实现里对应列的 pos 而非 prop。"
|
||
]
|
||
}
|