64 lines
2.7 KiB
JSON
64 lines
2.7 KiB
JSON
{
|
|
"slug": "expandabletable",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 可展开表格，行内用一对 tr 实现展开行，展开依据行数据里的 detail 字段。",
|
|
"usage": [
|
|
"Vue 2 端 data 每行需要自带 detail 对象（含 note 与 items），展开行直接读它渲染备注与明细。",
|
|
"展开状态由内部 openSet 维护，点第一列的 ▶ 按钮切换，展开的按钮加 is-open 类。",
|
|
"展开行是紧随数据行之后的第二个 tr，用 row[idKey] + '-exp' 作为 key 避免与主行重复。",
|
|
"idKey 默认是 id，决定行的 :key 与展开状态的键名。"
|
|
],
|
|
"bestPractices": [
|
|
"表格结构是原生 table 直接作根节点，首列固定 40px 宽并留空给展开按钮。",
|
|
"展开内容通过 colspan 跨满所有列，改动 columns 不需要同步改 colSpan 数值。",
|
|
"没有对外事件，展开状态不可受控；需要记录展开行请改实现或在外层监听 DOM。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端 3 个 prop、0 事件；展开用两行 tr 的方案而非嵌套表格。",
|
|
"table": [
|
|
{
|
|
"name": "data",
|
|
"type": "Array，默认空数组",
|
|
"desc": "行数据，每行需含 detail:{ note, items }"
|
|
},
|
|
{
|
|
"name": "columns",
|
|
"type": "Array，默认空数组",
|
|
"desc": "列定义，形如 [{ key, title }]"
|
|
},
|
|
{
|
|
"name": "idKey",
|
|
"type": "String，默认 'id'",
|
|
"desc": "行主键字段名，用于 :key 与展开状态"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"用真实 table 结构，展开行也是 tr，行列关系完整。",
|
|
"展开按钮是原生 button 但只有一个 ▶ 字符，没有 aria-expanded 与 aria-label，读屏器读不出它是展开控件。",
|
|
"展开内容出现时不会主动播报，需要用户自行浏览新增行。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/ExpandableTable.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "ExpandableTable.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/ExpandableTable.css",
|
|
"kind": "样式文件",
|
|
"desc": "ExpandableTable.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"expandabletable-ex-1"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/ExpandableTable.vue2.vue:33-36。",
|
|
"展开行结构与 pairing key 见 frameworks/ExpandableTable.vue2.vue:7-19，展开行 key 为 row[idKey] + '-exp'。",
|
|
"按钮的 is-open 类绑定见 frameworks/ExpandableTable.vue2.vue:10。"
|
|
]
|
|
}
|