BizCompareBoard 多方案对比

多方案对比板：方案 × 属性矩阵表格——首列属性行 sticky 吸左、方案表头 sticky 吸顶（列多横向滚动不迷路）、只看差异过滤（各方案值不全相等的行）、行分组标题、bool 字段图标化（✓ / ✗）、number 字段按 better 方向高亮最优值、推荐方案整列描边 + 「推荐」徽标、单元格文本超长 ellipsis + tooltip 全文。SaaS 套餐选购、会员档位对比、硬件机型横评等场景。

基础用法

	基础版	专业版	企业版
团队人数	10 人	50 人	不限人
存储容量	50GB	500GB	2TB
项目数量	3	20	不限
管理控制台	Web 控制台	Web 控制台	Web 控制台
支持渠道	工作日工单	7×24 工单	7×24 专属群
操作审计	保留 7 天	保留 90 天	永久保留

首列属性名吸左、表头吸顶；列过多时容器横向滚动，「只看差异」可过滤出各方案不一致的属性行。

plans 一列一个方案（fields 按 key 取值），fields 一行一个属性；文本超长自动省略并悬浮显示全文。

<script setup lang="ts">
/** 场景：基础——3 方案 SaaS 套餐对比 */
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'basic',
    name: '基础版',
    fields: { users: 10, storage: '50GB', projects: 3, console: 'Web 控制台', support: '工作日工单', audit: '保留 7 天' },
  },
  {
    key: 'pro',
    name: '专业版',
    fields: { users: 50, storage: '500GB', projects: 20, console: 'Web 控制台', support: '7×24 工单', audit: '保留 90 天' },
  },
  {
    key: 'enterprise',
    name: '企业版',
    fields: { users: '不限', storage: '2TB', projects: '不限', console: 'Web 控制台', support: '7×24 专属群', audit: '永久保留' },
  },
]

const fields: BizCompareField[] = [
  { key: 'users', label: '团队人数', type: 'number', unit: ' 人' },
  { key: 'storage', label: '存储容量' },
  { key: 'projects', label: '项目数量', type: 'number' },
  { key: 'console', label: '管理控制台' },
  { key: 'support', label: '支持渠道' },
  { key: 'audit', label: '操作审计' },
]
</script>

<template>
  <div>
    <BizCompareBoard :plans="plans" :fields="fields" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      首列属性名吸左、表头吸顶；列过多时容器横向滚动，「只看差异」可过滤出各方案不一致的属性行。
    </p>
  </div>
</template>

	免费版尝鲜	团队版最受欢迎推荐 ¥299 / 月	旗舰版¥899 / 月
表单数量	5	50	不限
回收答卷上限	100	10000	不限
数据导出
自定义域名

只看差异

	Air 版	Pro 版	Ultra 版	Max 版
屏幕尺寸	6.67 英寸	6.67 英寸	6.8 英寸	6.8 英寸
刷新率	120Hz	120Hz	120Hz	144Hz
电池容量	5000mAh	5500mAh	6000mAh	6000mAh
有线快充	67W	90W	120W	120W
机身重量	193g	206g	226g	219g

初始仅显示差异行（操作系统 / NFC 等一致项被过滤）；取消勾选「只看差异」恢复全部属性行，差异行首列带标记点。

diff-only 设定「只看差异」开关初始值；各方案取值不全相等（bool / number / text 统一值比较）的行判定为差异行，行首带标记点，开启后仅渲染差异行，差异行数实时统计。

<script setup lang="ts">
/** 场景：只看差异——diff-only 初始开启，仅渲染各方案不一致的行 */
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'air',
    name: 'Air 版',
    fields: { os: '澎湃 OS', screen: 6.67, refresh: 120, battery: 5000, charge: 67, nfc: true, weight: 193 },
  },
  {
    key: 'pro',
    name: 'Pro 版',
    fields: { os: '澎湃 OS', screen: 6.67, refresh: 120, battery: 5500, charge: 90, nfc: true, weight: 206 },
  },
  {
    key: 'ultra',
    name: 'Ultra 版',
    fields: { os: '澎湃 OS', screen: 6.8, refresh: 120, battery: 6000, charge: 120, nfc: true, weight: 226 },
  },
  {
    key: 'max',
    name: 'Max 版',
    fields: { os: '澎湃 OS', screen: 6.8, refresh: 144, battery: 6000, charge: 120, nfc: true, weight: 219 },
  },
]

const fields: BizCompareField[] = [
  { key: 'os', label: '操作系统' },
  { key: 'screen', label: '屏幕尺寸', type: 'number', unit: ' 英寸' },
  { key: 'refresh', label: '刷新率', type: 'number', unit: 'Hz' },
  { key: 'battery', label: '电池容量', type: 'number', unit: 'mAh', better: 'high' },
  { key: 'charge', label: '有线快充', type: 'number', unit: 'W', better: 'high' },
  { key: 'nfc', label: 'NFC', type: 'bool' },
  { key: 'weight', label: '机身重量', type: 'number', unit: 'g', better: 'low' },
]
</script>

<template>
  <div>
    <BizCompareBoard :plans="plans" :fields="fields" :diff-only="true" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      初始仅显示差异行（操作系统 / NFC 等一致项被过滤）；取消勾选「只看差异」恢复全部属性行，差异行首列带标记点。
    </p>
  </div>
</template>

行分组

	启动版	商业版	尊享版
适用平台	Web / 小程序	Web / 小程序 / 桌面端	全端覆盖
基础功能
仓库数量	5	50	不限
成员上限	10	100	不限
存储空间	10GB	200GB	1000GB
高级功能
自动化流水线
代码安全扫描
私有制品库
服务支持
响应时效	工作日响应	7×24 响应	7×24 + 专属通道
专属技术顾问
培训服务	视频课程	视频课程 + 直播	线下专场培训

「基础功能 / 高级功能 / 服务支持」为分组标题行（跨列、填充背景、粗体）；「适用平台」未设置 group，独立成行。开启「只看差异」后，组内无差异行时分组标题同步隐藏。

field.group 相邻同名的行归入一组，组首渲染跨列分组标题行；无 group 的行独立成行。「只看差异」下分组内无差异行时分组标题同步隐藏。

<script setup lang="ts">
/** 场景：行分组——相邻同 group 归组并渲染跨列分组标题行 */
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'starter',
    name: '启动版',
    fields: {
      platform: 'Web / 小程序',
      repos: 5, members: 10, storage: 10,
      pipeline: false, scan: false, artifact: false,
      sla: '工作日响应', advisor: false, training: '视频课程',
    },
  },
  {
    key: 'business',
    name: '商业版',
    fields: {
      platform: 'Web / 小程序 / 桌面端',
      repos: 50, members: 100, storage: 200,
      pipeline: true, scan: true, artifact: false,
      sla: '7×24 响应', advisor: false, training: '视频课程 + 直播',
    },
  },
  {
    key: 'premium',
    name: '尊享版',
    fields: {
      platform: '全端覆盖',
      repos: '不限', members: '不限', storage: 1000,
      pipeline: true, scan: true, artifact: true,
      sla: '7×24 + 专属通道', advisor: true, training: '线下专场培训',
    },
  },
]

const fields: BizCompareField[] = [
  { key: 'platform', label: '适用平台' },
  { key: 'repos', label: '仓库数量', type: 'number', group: '基础功能', better: 'high' },
  { key: 'members', label: '成员上限', type: 'number', group: '基础功能', better: 'high' },
  { key: 'storage', label: '存储空间', type: 'number', unit: 'GB', group: '基础功能', better: 'high' },
  { key: 'pipeline', label: '自动化流水线', type: 'bool', group: '高级功能' },
  { key: 'scan', label: '代码安全扫描', type: 'bool', group: '高级功能' },
  { key: 'artifact', label: '私有制品库', type: 'bool', group: '高级功能' },
  { key: 'sla', label: '响应时效', group: '服务支持' },
  { key: 'advisor', label: '专属技术顾问', type: 'bool', group: '服务支持' },
  { key: 'training', label: '培训服务', group: '服务支持' },
]
</script>

<template>
  <div>
    <BizCompareBoard :plans="plans" :fields="fields" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      「基础功能 / 高级功能 / 服务支持」为分组标题行（跨列、填充背景、粗体）；「适用平台」未设置 group，独立成行。开启「只看差异」后，组内无差异行时分组标题同步隐藏。
    </p>
  </div>
</template>

布尔字段

	开源版	云服务版	私有化版
数据导出
开放 API
SSO 单点登录
私有化部署
SLA 保障
专属客户成功经理

type 为 bool 的行按图标渲染：true 绿色对勾、false 弱化叉号；方案未提供该字段取值时显示占位符「—」。

type: 'bool'：true 渲染绿色对勾、false 渲染弱化叉号、缺省值显示占位符。

<script setup lang="ts">
/** 场景：布尔字段——true 绿勾 / false 弱化叉 / 缺省占位 */
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'oss',
    name: '开源版',
    fields: { export: true, api: true, sso: false, privateDeploy: true, sla: false, dedicated: false },
  },
  {
    key: 'cloud',
    name: '云服务版',
    fields: { export: true, api: true, sso: true, privateDeploy: false, sla: true, dedicated: false },
  },
  {
    key: 'private',
    name: '私有化版',
    fields: { export: true, api: true, sso: true, privateDeploy: true, sla: true, dedicated: true },
  },
]

const fields: BizCompareField[] = [
  { key: 'export', label: '数据导出', type: 'bool' },
  { key: 'api', label: '开放 API', type: 'bool' },
  { key: 'sso', label: 'SSO 单点登录', type: 'bool' },
  { key: 'privateDeploy', label: '私有化部署', type: 'bool' },
  { key: 'sla', label: 'SLA 保障', type: 'bool' },
  { key: 'dedicated', label: '专属客户成功经理', type: 'bool' },
]
</script>

<template>
  <div>
    <BizCompareBoard :plans="plans" :fields="fields" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      type 为 bool 的行按图标渲染：true 绿色对勾、false 弱化叉号；方案未提供该字段取值时显示占位符「—」。
    </p>
  </div>
</template>

自定义单元格

	节点 A	节点 B	节点 C
CPU 得分	96 分	83 分	65 分
内存得分	88 分	95 分	60 分
网络得分	72 分	90 分	94 分
磁盘得分	91 分	66 分	87 分

cell 插槽接收 { plan, field, value, best }：示例将分数渲染为区间着色标签，best 为该行数值最优方案时加深显示。

cell 插槽接收 { plan, field, value, best }，可按字段自定义渲染（示例按分值区间着色标签）。

<script setup lang="ts">
/** 场景：自定义单元格——cell 插槽按分值区间渲染标签 */
import { ElTag } from 'element-plus'
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan, BizCompareValue } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'node-a',
    name: '节点 A',
    fields: { cpu: 96, memory: 88, network: 72, disk: 91 },
  },
  {
    key: 'node-b',
    name: '节点 B',
    fields: { cpu: 83, memory: 95, network: 90, disk: 66 },
  },
  {
    key: 'node-c',
    name: '节点 C',
    fields: { cpu: 65, memory: 60, network: 94, disk: 87 },
  },
]

const fields: BizCompareField[] = [
  { key: 'cpu', label: 'CPU 得分', type: 'number', better: 'high' },
  { key: 'memory', label: '内存得分', type: 'number', better: 'high' },
  { key: 'network', label: '网络得分', type: 'number', better: 'high' },
  { key: 'disk', label: '磁盘得分', type: 'number', better: 'high' },
]

/** 按分值区间映射标签类型（≥90 优 / ≥75 良 / 其余一般） */
const scoreTagType = (value: BizCompareValue | undefined): 'success' | 'warning' | 'info' => {
  const score = typeof value === 'number' ? value : 0
  if (score >= 90) return 'success'
  if (score >= 75) return 'warning'
  return 'info'
}
</script>

<template>
  <div>
    <BizCompareBoard :plans="plans" :fields="fields">
      <template #cell="{ value, best }">
        <ElTag :type="scoreTagType(value)" size="small" :effect="best ? 'dark' : 'light'">
          {{ value }} 分
        </ElTag>
      </template>
    </BizCompareBoard>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      cell 插槽接收 { plan, field, value, best }：示例将分数渲染为区间着色标签，best 为该行数值最优方案时加深显示。
    </p>
  </div>
</template>

价格与角标

	月卡¥25 / 月	季卡热卖¥66 / 季	年卡立省 ¥120¥180 / 年
可看视频上限	500	2000	不限
每日下载次数	30	90	400
跳过贴片广告
专属片单定制

plan.price 展示型价格（主色加粗），plan.tag 渲染为方案角标（如「热卖」）；footer 插槽补充底部说明文案。

plan.price 展示型价格文本（主色加粗），plan.tag 方案角标（如「热卖」）；footer 插槽补充底部说明。

<script setup lang="ts">
/** 场景：价格与角标——price 主色加粗 + tag 角标 + footer 底部说明 */
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'monthly',
    name: '月卡',
    price: '¥25 / 月',
    fields: { videos: 500, downloads: 30, adFree: false, playlist: false },
  },
  {
    key: 'quarterly',
    name: '季卡',
    tag: '热卖',
    price: '¥66 / 季',
    fields: { videos: 2000, downloads: 90, adFree: true, playlist: false },
  },
  {
    key: 'yearly',
    name: '年卡',
    tag: '立省 ¥120',
    price: '¥180 / 年',
    fields: { videos: '不限', downloads: 400, adFree: true, playlist: true },
  },
]

const fields: BizCompareField[] = [
  { key: 'videos', label: '可看视频上限', type: 'number', better: 'high' },
  { key: 'downloads', label: '每日下载次数', type: 'number', better: 'high' },
  { key: 'adFree', label: '跳过贴片广告', type: 'bool' },
  { key: 'playlist', label: '专属片单定制', type: 'bool' },
]
</script>

<template>
  <div>
    <BizCompareBoard :plans="plans" :fields="fields">
      <template #footer>
        价格为展示型文本，仅用于对比呈现；实际计费以收银台为准，年卡支持随时升级套餐。
      </template>
    </BizCompareBoard>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      plan.price 展示型价格（主色加粗），plan.tag 渲染为方案角标（如「热卖」）；footer 插槽补充底部说明文案。
    </p>
  </div>
</template>

数值最优高亮

	经济型 e2.medium¥86 / 月	通用型 c4.large¥168 / 月	计算型 c6.xlarge¥329 / 月
vCPU 核数	2 核	4 核	8 核
内存容量	4GB	8GB	16GB
峰值带宽	5Mbps	10Mbps	15Mbps
平均延迟	42ms	18ms	9ms
可用性	99.9%	99.95%	99.99%

better="high" 越大越优（核数 / 内存 / 带宽 / 可用性），better="low" 越小越优（延迟）；差异行内最优值绿色加粗 + 对勾，其余弱化。表头 price 为主色价格文本。

type: 'number' + better: 'high' | 'low'：差异行内最优值 success 加粗 + 对勾，其余弱化；unit 拼接在数值尾部。

<script setup lang="ts">
/** 场景：数值最优高亮——better high/low 方向标记差异行最优值 */
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'eco',
    name: '经济型 e2.medium',
    price: '¥86 / 月',
    fields: { cpu: 2, memory: 4, bandwidth: 5, latency: 42, uptime: 99.9 },
  },
  {
    key: 'general',
    name: '通用型 c4.large',
    price: '¥168 / 月',
    fields: { cpu: 4, memory: 8, bandwidth: 10, latency: 18, uptime: 99.95 },
  },
  {
    key: 'compute',
    name: '计算型 c6.xlarge',
    price: '¥329 / 月',
    fields: { cpu: 8, memory: 16, bandwidth: 15, latency: 9, uptime: 99.99 },
  },
]

const fields: BizCompareField[] = [
  { key: 'cpu', label: 'vCPU 核数', type: 'number', unit: ' 核', better: 'high' },
  { key: 'memory', label: '内存容量', type: 'number', unit: 'GB', better: 'high' },
  { key: 'bandwidth', label: '峰值带宽', type: 'number', unit: 'Mbps', better: 'high' },
  { key: 'latency', label: '平均延迟', type: 'number', unit: 'ms', better: 'low' },
  { key: 'uptime', label: '可用性', type: 'number', unit: '%', better: 'high' },
]
</script>

<template>
  <div>
    <BizCompareBoard :plans="plans" :fields="fields" :diff-only="true" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      better="high" 越大越优（核数 / 内存 / 带宽 / 可用性），better="low" 越小越优（延迟）；差异行内最优值绿色加粗 + 对勾，其余弱化。表头 price 为主色价格文本。
    </p>
  </div>
</template>

事件

	标准车位	充电车位新能源	子母车位
面积	12.5㎡	13㎡	22㎡
室内车位
带充电桩
月租金	350 元	520 元	680 元

plan-click 最近一次：（未点击）
row-click 最近一次：（未点击）
diff-toggle 最近一次：（未切换）

点击方案表头触发 plan-click（回传方案对象）、点击行属性名触发 row-click（回传字段对象）、切换「只看差异」触发 diff-toggle。

<script setup lang="ts">
/** 场景：事件——plan-click / row-click / diff-toggle 回显 */
import { ref } from 'vue'
import { BizCompareBoard } from 'vue3-ep-biz-lib'
import type { BizCompareField, BizComparePlan } from 'vue3-ep-biz-lib'

const plans: BizComparePlan[] = [
  {
    key: 'standard',
    name: '标准车位',
    fields: { area: 12.5, indoor: true, charging: false, monthly: 350 },
  },
  {
    key: 'charging',
    name: '充电车位',
    tag: '新能源',
    fields: { area: 13, indoor: true, charging: true, monthly: 520 },
  },
  {
    key: 'villa',
    name: '子母车位',
    fields: { area: 22, indoor: false, charging: false, monthly: 680 },
  },
]

const fields: BizCompareField[] = [
  { key: 'area', label: '面积', type: 'number', unit: '㎡', better: 'high' },
  { key: 'indoor', label: '室内车位', type: 'bool' },
  { key: 'charging', label: '带充电桩', type: 'bool' },
  { key: 'monthly', label: '月租金', type: 'number', unit: ' 元', better: 'low' },
]

const lastPlan = ref<BizComparePlan | null>(null)
const lastField = ref<BizCompareField | null>(null)
const diffEnabled = ref<boolean | null>(null)

const onPlanClick = (plan: BizComparePlan): void => {
  lastPlan.value = plan
}

const onRowClick = (field: BizCompareField): void => {
  lastField.value = field
}

const onDiffToggle = (enabled: boolean): void => {
  diffEnabled.value = enabled
}
</script>

<template>
  <div>
    <BizCompareBoard
      :plans="plans"
      :fields="fields"
      @plan-click="onPlanClick"
      @row-click="onRowClick"
      @diff-toggle="onDiffToggle"
    />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      plan-click 最近一次：{{ lastPlan === null ? '（未点击）' : lastPlan.name }}<br />
      row-click 最近一次：{{ lastField === null ? '（未点击）' : lastField.label }}<br />
      diff-toggle 最近一次：{{ diffEnabled === null ? '（未切换）' : diffEnabled ? '开启' : '关闭' }}
    </p>
  </div>
</template>

Props

属性名	类型	默认值	说明
plans	`BizComparePlan[]`	`[]`	对比方案列表（一列一方案：key / name / tag / price / recommend / fields）
fields	`BizCompareField[]`	`[]`	对比字段列表（一行一属性：key / label / group / type / better / unit）
diff-only	`boolean`	`false`	「只看差异」开关初始值（仅初始，不跟随变化）
show-diff-switch	`boolean`	`true`	显示「只看差异」开关与差异计数
show-header	`boolean`	`true`	显示方案名表头行（关闭后 `plan-click` 不再可用）
empty-text	`string`	`'暂无对比数据'`	plans 为空时的空态文案

Events

事件名	参数	说明
plan-click	`(plan: BizComparePlan)`	点击方案表头
row-click	`(field: BizCompareField)`	点击行属性行（首列）
diff-toggle	`(enabled: boolean)`	「只看差异」开关切换

Slots

插槽名	参数	说明
cell	`{ plan, field, value, best }`	自定义单元格（value 为取值、best 为是否数值最优）
plan-header	`{ plan }`	自定义方案表头内容
group-title	`{ group }`	自定义分组标题
footer	—	表格下方底部区域

Expose

名称	类型	说明
getDiffKeys	`() => string[]`	当前差异行 field key 列表（按 fields 顺序）
isDiffRow	`(key: string) => boolean`	判断指定 field key 是否为差异行

BizCompareBoard 多方案对比 ​

基础用法 ​

推荐方案 ​

只看差异 ​

行分组 ​

布尔字段 ​

自定义单元格 ​

价格与角标 ​

数值最优高亮 ​

事件 ​

Props ​

Events ​

Slots ​

Expose ​