63 lines
3.7 KiB
JSON
63 lines
3.7 KiB
JSON
{
|
||
"slug": "mergedcelltable",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 合并单元格表格：列上标 merge 即按相邻相同值自动算 rowspan。",
|
||
"usage": [
|
||
"合并开关写在列定义上：columns 里某项带 merge 为 true 就参与纵向合并（MergedCellTable.vue3.vue:30），columns 由 defineProps 声明，不需要你预先算好 span。",
|
||
"合并只认相邻且相等的值：从当前行往后逐个比对，值一变就断开成新的一组（第 32-41 行），这段扫描写在 computed merged 里，data 必须先按要合并的列排好序。",
|
||
"计算结果落在内部 computed merged 上，给每行补 _first 与 _span 两个私有字段（第 29、37-38 行），这些字段不 emit，外部拿不到。",
|
||
"单元格用 v-if 判断非合并列或该组首行才输出（第 10 行），首行判断读的就是 computed 补上的 _first 私有字段（第 11 行）。",
|
||
"rowspan 直接绑 computed 算出的跨度（第 12 行），被合并的单元格额外挂 kole-merged 类用于样式区分。",
|
||
"组件是 <script setup>，defineProps 两个（第 23-26 行），没有 emit 与插槽，合并列与非合并列都在同一段模板里处理。"
|
||
],
|
||
"bestPractices": [
|
||
"data 的顺序决定合并结果：同样几行数据打乱后只有相邻相同值会并到一起，要按业务分组请在传入前排序。",
|
||
"合并是严格相等比较（第 34 行），不做大小写或空白归一，带尾随空格的值会被当成另一组。",
|
||
"两个 prop 都给空数组默认值（第 23-26 行），漏传渲染空表不报错；传给组件的数据是只读输入，别拿返回对象的私有字段回写业务状态。",
|
||
"合并列里混有 null 或 undefined 时，连续多个空值也会被并成一个跨行单元格。"
|
||
],
|
||
"a11y": [
|
||
"结构是原生 table / th / td，合并用真 rowspan，读屏器能按跨度播报行列关系，比用 div 拼的假表格可靠。",
|
||
"表头 th 没有 scope 属性（第 4 行），列多且带合并时建议在业务侧显式标注表头归属。",
|
||
"每组文本只出现在首行单元格，后续行在无障碍树里该列是空的，读屏器播到后续行时不会重复念分组名。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 3 端载体是两个 defineProps（data / columns）；合并行为由列上的 merge 字段与内部 computed 决定，组件没有 emit 与插槽（frameworks/MergedCellTable.vue3.vue:23-44）。",
|
||
"table": [
|
||
{
|
||
"name": "columns",
|
||
"type": "Array",
|
||
"desc": "列配置（frameworks/MergedCellTable.vue3.vue:4）"
|
||
},
|
||
{
|
||
"name": "data",
|
||
"type": "Array",
|
||
"desc": "数据源（frameworks/MergedCellTable.vue3.vue:24）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/MergedCellTable.vue3.vue",
|
||
"kind": "Vue 3",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/MergedCellTable.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"mergedcelltable-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/MergedCellTable.vue3.vue:23-26，两个 prop 均默认空数组。",
|
||
"合并算法见 frameworks/MergedCellTable.vue3.vue:28-44，严格相等比较在第 34 行，私有字段写入在第 37-38 行。",
|
||
"模板里的条件渲染与 rowspan 见 frameworks/MergedCellTable.vue3.vue:10-12，表头见第 4 行。",
|
||
"契约声明的驱动维度 mergeAxis / headerLevel 属设计词汇层，未作为 prop 写入本页；实现只支持按列纵向合并且没有多变表头逻辑。"
|
||
]
|
||
}
|