74 lines
2.9 KiB
JSON
74 lines
2.9 KiB
JSON
{
|
||
"slug": "summaryrowtable",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 汇总行表格，表尾 tfoot 按 summary 配置对指定列做求和或平均。",
|
||
"usage": [
|
||
"Vue 2 端 summary 是对象，键为列 key，值为运算类型，组件据它在 tfoot 里算出结果。",
|
||
"labelKey 指定哪一列显示汇总标题（默认 name 列），文案从 labelText 取。",
|
||
"表尾行的标签单元格带 kole-sum-label 类，便于单独定制样式。",
|
||
"数值格式化统一走 fmt，正负号的区分用 is-pos 类表达。"
|
||
],
|
||
"bestPractices": [
|
||
"没在 summary 里出现的列，表尾单元格留空，不要指望它自动求和。",
|
||
"summary 默认值是空对象函数，不传时表尾仍渲染但所有数值列为空。",
|
||
"tfoot 在真实 table 内部，语义上是正宗的汇总行，读屏器会识别为表格页脚。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 5 个 prop、0 事件；汇总运算在 computed 与 fmt 中完成。",
|
||
"table": [
|
||
{
|
||
"name": "data",
|
||
"type": "Array，默认空数组",
|
||
"desc": "行数据"
|
||
},
|
||
{
|
||
"name": "columns",
|
||
"type": "Array，默认空数组",
|
||
"desc": "列定义，形如 [{ key, title }]"
|
||
},
|
||
{
|
||
"name": "summary",
|
||
"type": "Object，默认空对象",
|
||
"desc": "汇总配置，键为列 key，值为运算类型"
|
||
},
|
||
{
|
||
"name": "labelKey",
|
||
"type": "String，默认 'name'",
|
||
"desc": "哪一列显示汇总标题文案"
|
||
},
|
||
{
|
||
"name": "labelText",
|
||
"type": "String，默认 '合计 / 平均'",
|
||
"desc": "汇总行的标签文案"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"使用 tfoot 承载汇总，读屏器能将其归入表格结构，这是本组无障碍做得最规范的一点。",
|
||
"正负值只用颜色与 is-pos 类区分，没有正负号文字，色觉障碍用户可能无法区分。",
|
||
"没有 caption 与 scope 属性，表头与数据列的对应关系依赖浏览器推断。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/SummaryRowTable.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "SummaryRowTable.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/SummaryRowTable.css",
|
||
"kind": "样式文件",
|
||
"desc": "SummaryRowTable.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"summaryrowtable-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/SummaryRowTable.vue2.vue:22-28，summary 默认值为 () => ({})。",
|
||
"tfoot 结构与标签单元格见 frameworks/SummaryRowTable.vue2.vue:8-15，kole-sum-label 在第 11 行。",
|
||
"数值与汇总取值见 frameworks/SummaryRowTable.vue2.vue:12 的 fmt(compute(...))。"
|
||
]
|
||
}
|