80 lines
4.1 KiB
JSON
80 lines
4.1 KiB
JSON
{
|
||
"slug": "summaryrowtable",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "带合计行的表格：summary 按列声明聚合方式（sum/avg/max/min/count），表尾自动算值。",
|
||
"usage": [
|
||
"React 端聚合方式是数据而不是回调：summary={列key: 'sum'} 支持 sum/avg/max/min/count 五种（SummaryRowTable.jsx:4-13）。",
|
||
"表尾标签列由 labelKey 指定（默认 name），文案由 labelText 给（默认「合计 / 平均」）（SummaryRowTable.jsx:18-20）。",
|
||
"数值全部经 Number(...) || 0 转换，非数字按 0 参与计算（SummaryRowTable.jsx:5）。",
|
||
"avg 用 toFixed(1) 保留一位小数，其余返回原始数值（SummaryRowTable.jsx:8）。",
|
||
"还有一列阈值高亮：列上带 pos 时，值大于等于该阈值会加 is-pos 类（SummaryRowTable.jsx:35）。"
|
||
],
|
||
"bestPractices": [
|
||
"labelKey 必须命中某个真实列 key，否则表尾不会出现文字标签（SummaryRowTable.jsx:46）。",
|
||
"summary 里未声明的列在表尾渲染成空字符串，不会显示 0，避免误导（SummaryRowTable.jsx:47-50）。",
|
||
"count 返回的是行数而非数值列，适合「条数」列。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "data",
|
||
"type": "Array<object>",
|
||
"desc": "行数据"
|
||
},
|
||
{
|
||
"name": "columns",
|
||
"type": "Array<{ key, title, pos? }>",
|
||
"desc": "列定义，pos 为阈值高亮的比较基准"
|
||
},
|
||
{
|
||
"name": "summary",
|
||
"type": "{ [列key]: 'sum' | 'avg' | 'max' | 'min' | 'count' }",
|
||
"desc": "各列的聚合方式"
|
||
},
|
||
{
|
||
"name": "labelKey",
|
||
"type": "string",
|
||
"desc": "表尾标签所在的列 key，默认 name"
|
||
},
|
||
{
|
||
"name": "labelText",
|
||
"type": "string",
|
||
"desc": "表尾标签文案，默认「合计 / 平均」"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"合计行放在原生 <tfoot> 中（SummaryRowTable.jsx:42），读屏能识别为表尾汇总区域，语义正确。",
|
||
"汇总单元格与数据单元格没有 scope/headers 关联，复杂表建议在列标题里写明「合计」。",
|
||
"is-pos 阈值高亮只靠颜色，若表达「超标」等状态需另加文本或图标。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/SummaryRowTable.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/SummaryRowTable.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"summaryrowtable-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/SummaryRowTable.jsx:4 中可指到 data（Array<object>）——行数据",
|
||
"frameworks/SummaryRowTable.jsx:17 中可指到 columns（Array<{ key, title, pos? }>）——列定义，pos 为阈值高亮的比较基准",
|
||
"frameworks/SummaryRowTable.jsx:18 中可指到 summary（{ [列key]: 'sum' | 'avg' | 'max' | 'min' | 'count' }）——各列的聚合方式",
|
||
"frameworks/SummaryRowTable.jsx:19 中可指到 labelKey（string）——表尾标签所在的列 key，默认 name",
|
||
"frameworks/SummaryRowTable.jsx:20 中可指到 labelText（string）——表尾标签文案，默认「合计 / 平均」",
|
||
"props 解构清单见 frameworks/SummaryRowTable.jsx:15-21；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/SummaryRowTable.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：5 行中 5 行是 frameworks/SummaryRowTable.jsx 解构出的顶层 props（解构块 frameworks/SummaryRowTable.jsx:15-21）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|