Components

DataTable 数据表

面向控制台的受控增强表格：排序、分页、行选择与一致状态。

可控表格状态

排序、分页、选择状态由调用方保存；slot: true 的列查找 #cell-<key> 作用域插槽。

已选择 0 个节点

	节点	地域	状态	延迟	操作
	hkg-edge-01	中国香港	在线	8ms
	nrt-edge-02	日本东京	在线	14ms

第 1 / 2 页，共 4 条

<DataTable
  v-model:selected="selected"
  v-model:sortable="sort"
  v-model:page="page"
  :columns="columns"
  :rows="rows"
  row-key="name"
  selectable
  :page-size="20"
>
  <template #toolbar="{ selected, clearSelection }">
    已选择 {{ selected.length }} 项
  </template>
  <template #cell-status="{ value }">
    <Badge :color="value === '在线' ? 'success' : value === '维护' ? 'warning' : 'neutral'" variant="soft" dot size="xs">{{ value }}</Badge>
  </template>
  <template #cell-actions>
    <Button size="xs" variant="ghost" color="neutral">管理</Button>
  </template>
</DataTable>

密度控制与状态展示

通过 density 属性快速在紧凑模式 (compact)、标准模式 (default) 与宽松模式 (relaxed) 间切换，高密度表格采用更紧凑的行高并适配更密集的监控数据。

显示密度：

节点	地域	状态	延迟
hkg-edge-01	中国香港	在线	8ms
nrt-edge-02	日本东京	在线	14ms
fra-edge-04	德国法兰克福	维护	32ms
sjc-edge-03	美国硅谷	离线	—

<DataTable :columns="columns" :rows="rows" density="compact" row-key="name">
  <template #cell-status="{ value }">
    <StatusBadge :status="value === '在线' ? 'online' : 'offline'" size="xs" />
  </template>
</DataTable>

API 参考

属性	类型	默认值	说明
`columns`	`{ key, label, width?, align?, slot?, sortable? }[]`	`—`	列定义；sortable 开启受控列排序。
`density`	`'compact' \| 'default' \| 'relaxed'`	`'default'`	表格行内间距密度模式。
`rows / rowKey`	`Record<string, unknown>[] / string \| function`	`—`	行数据和稳定行标识。
`v-model:selected`	`(string \| number)[]`	`[]`	启用 selectable 后的受控行选择。
`v-model:sortable`	`{ key, direction } \| undefined`	`—`	受控排序状态，数据排序由调用方处理。
`v-model:page / pageSize / total`	`number`	`1 / 0 / rows.length`	受控分页；传 total 时适配服务端分页。
`loading / error`	`boolean / string`	`false / —`	统一骨架加载与错误状态。
`visibleColumnKeys`	`string[]`	`全部列`	受控列显隐。
`toolbar / empty / error / cell-<key>`	`slot`	`—`	工具栏、状态与单元格插槽。