← 全部模板

前后对比表 <CompareTable />

逐行对比“之前 / 之后”,新状态所在列浮在一块白色面板上,视线先落在变化后的结果。

分组
对比 · 旧 → 新
组件
CompareTable · #compare-table

适合

  • 版本升级、政策调整、改版前后
  • 每行都是同一维度的旧值与新值

不适合

  • 只有 1–2 处变化:写进 NumberedColumns
  • 需要三方以上比较:拆页或自定义
  • 单元格需要换行解释

内容上限

1rows 4–7 行;少于 4 行时下方会空
2每个单元格必须一行放下:item ≤ 12 字,值 ≤ 22 字
3命令、文件名设 mono: true

字段

字段类型
kicker · 必填string小节名
title · 必填string | string[]标题
columns · 必填[before, after]两列的列名
rows · 必填{ item, before, after, mono? }[]对比行
itemLabelstring第一列列名,默认“项目”
sourcestring显示在标题右侧(表格占满高度)

示例代码

<CompareTable
  kicker="行为变化"
  title="升级之后,这些默认行为变了"
  columns={['Lumen 12 · birch', 'Lumen 13 · aurora']}
  rows={[
    { item: '仓库配置', before: 'sources.list 单行格式', after: 'lumen.sources(deb822)', mono: true },
    { item: '/tmp', before: '磁盘上的普通目录', after: 'tmpfs,最多占用 50% 内存' },
  ]}
  source="aurora 发行说明 §2 · §5"
/>