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>

API 参考

属性	类型	默认值	说明
columns	{ key, label, width?, align?, slot?, sortable? }[]	—	列定义；sortable 开启受控列排序。
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	—	工具栏、状态与单元格插槽。