104 lines
5.1 KiB
JSON
104 lines
5.1 KiB
JSON
{
|
||
"slug": "treetable",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "树形表格：data 是嵌套行，父级按 summaryColumn 汇总叶子，选择与展开由 props 驱动。",
|
||
"usage": [
|
||
"React 端行数据是嵌套结构 [{key, children, ...字段}]，展开态内部用 Set 维护并支持 defaultExpandedKeys 预置（TreeTable.jsx:8,31,36）。",
|
||
"父级汇总不是传值而是指定列名：summaryColumn 为某一数值列时，父行显示 leafSum 求和结果（TreeTable.jsx:9,79）。",
|
||
"级联勾选限定在叶子：全选状态以 leafKeys 为基准，勾父级会联动子孙（TreeTable.jsx:17-23,57-75）。",
|
||
"选择结果经 onSelectionChange 上抛 key 数组，行点击是单选一条、复选框是级联（TreeTable.jsx:68,77）。",
|
||
"表尾合计由 summary.label 定制标签，默认「合计」（TreeTable.jsx:33,124）。"
|
||
],
|
||
"bestPractices": [
|
||
"summaryColumn 必须指向某个真实列 key，且该列在 rows 里是可加的数字；组件用 Number(...) || 0 兜底，非数字会被当 0（TreeTable.jsx:13）。",
|
||
"rowKey 默认是 key（与 Table 的 id 不同），从扁平表格迁移过来时务必显式传 rowKey（TreeTable.jsx:28）。",
|
||
"树形缩进用内联 paddingLeft 计算 depth * 16（TreeTable.jsx:107），不要再叠加 CSS 的左内边距。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "columns",
|
||
"type": "Array<{ key, title, align? }>",
|
||
"desc": "列定义"
|
||
},
|
||
{
|
||
"name": "data",
|
||
"type": "Array<{ key, children?, ...字段 }>",
|
||
"desc": "树形行数据"
|
||
},
|
||
{
|
||
"name": "rowKey",
|
||
"type": "string",
|
||
"desc": "行主键字段名，默认 key"
|
||
},
|
||
{
|
||
"name": "selectable",
|
||
"type": "boolean",
|
||
"desc": "开启勾选列"
|
||
},
|
||
{
|
||
"name": "selectedKeys",
|
||
"type": "string[]",
|
||
"desc": "首次挂载时选中的叶子 key"
|
||
},
|
||
{
|
||
"name": "defaultExpandedKeys",
|
||
"type": "string[]",
|
||
"desc": "初始展开的行 key"
|
||
},
|
||
{
|
||
"name": "summaryColumn",
|
||
"type": "string",
|
||
"desc": "需要按叶子求和的数值列 key"
|
||
},
|
||
{
|
||
"name": "summary",
|
||
"type": "{ label }",
|
||
"desc": "表尾合计行配置，默认 label 为「合计」"
|
||
},
|
||
{
|
||
"name": "onSelectionChange",
|
||
"type": "(keys) => void",
|
||
"desc": "选择变化回调"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"用原生 <table> 结构（TreeTable.jsx:83-84），但层级关系仅靠缩进样式表达，读屏无法感知父子关系（无 aria-level/aria-expanded 的 treegrid 语义）。",
|
||
"展开箭头是可点击的 span（TreeTable.jsx:108-110），不可聚焦、无 aria-label，键盘用户无法展开节点。",
|
||
"复选框是原生 input[type=checkbox] 并用 indeterminate 表达半选（TreeTable.jsx:87-88），这一层语义是完好的。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/TreeTable.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/TreeTable.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"treetable-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/TreeTable.jsx:7 中可指到 columns（Array<{ key, title, align? }>）——列定义",
|
||
"frameworks/TreeTable.jsx:8 中可指到 data（Array<{ key, children?, ...字段 }>）——树形行数据",
|
||
"frameworks/TreeTable.jsx:16 中可指到 rowKey（string）——行主键字段名，默认 key",
|
||
"frameworks/TreeTable.jsx:29 中可指到 selectable（boolean）——开启勾选列",
|
||
"frameworks/TreeTable.jsx:30 中可指到 selectedKeys（string[]）——首次挂载时选中的叶子 key",
|
||
"frameworks/TreeTable.jsx:31 中可指到 defaultExpandedKeys（string[]）——初始展开的行 key",
|
||
"frameworks/TreeTable.jsx:9 中可指到 summaryColumn（string）——需要按叶子求和的数值列 key",
|
||
"frameworks/TreeTable.jsx:33 中可指到 summary（{ label }）——表尾合计行配置，默认 label 为「合计」",
|
||
"frameworks/TreeTable.jsx:34 中可指到 onSelectionChange（(keys) => void）——选择变化回调",
|
||
"props 解构清单见 frameworks/TreeTable.jsx:25-35；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/TreeTable.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：9 行中 9 行是 frameworks/TreeTable.jsx 解构出的顶层 props（解构块 frameworks/TreeTable.jsx:25-35）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|