---
url: /components/comparison-table.md
---
# ComparisonTable 对比表

`EvComparisonTable` 展示多档位/多产品间的差异，一套组件两种用法：**定价档位对照**
（定价区标配，列头是档位名 + 价格注释）与**产品方案 compare**（列头带产品图、配色点、
徽标、一句话与价格，特性按分组陈列）。

内部以 CSS Grid 实现（非 `<table>`）：无斑马纹、无悬浮变色，`featured` 高亮列不受
任何交互态干扰；默认无边框的现代形态（行分隔线 + 组标题分节），`bordered` 可切换
网格边框。表格整体居中呈现，单元格 `true` 对勾、`false` 破折号、字符串直出、
**字符串数组多行**；窄容器自动横向滚动，不会撑破页面。

## 基础用法

```vue
<EvComparisonTable
  :columns="[{ label: '免费版' }, { label: '专业版', featured: true }]"
  :rows="[{ label: '离线同步', values: [false, true] }]"
/>
```

## 产品方案 compare

```vue
<EvComparisonTable
  :columns="[
    { label: 'Aurora Pro', tagline: '主力机型', badge: '新款', price: '¥8,999', priceNote: '起' },
  ]"
  :groups="[
    { title: '显示屏', rows: [{ label: '高刷新率', values: [true] }] },
  ]"
/>
```

## 带边框形态

```vue
<EvComparisonTable bordered :columns="…" :rows="…" />
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| columns | 产品/档位列，见下 | array | `[]` |
| rows | 平铺行（简单对照） | array | `[]` |
| groups | 分组行（compare 形态）：`{ title, rows }` | array | `[]` |
| feature-head | 首列表头文案 | string | `功能` |
| bordered | 网格边框形态 | boolean | `false` |

**columns 字段**：

| 字段 | 说明 | 类型 |
| --- | --- | --- |
| label | 名称（可挂 `href` 链接） | string |
| note | 次要说明（价格周期等） | string |
| featured | 整列淡主色底突出 | boolean |
| image | 产品图 | string |
| colors | 配色点色值数组 | string\[] |
| badge | 徽标（新款 / 推荐） | string |
| tagline | 一句话描述 | string |
| price / priceNote | 价格与说明 | string |

**rows 字段**：`label` / `description` / `values`；`values[j]` 与 columns 对齐——
`true` 对勾、`false` 破折号、字符串直出、字符串数组多行。`groups` 中的行同构。

### 插槽

| 插槽 | 说明 |
| --- | --- |
| feature-head | 首列表头覆写 |

窄屏或窄容器下表格自动横向滚动，列宽按产品数撑最小宽度，不会挤压换行。