DataTable 数据表格

轻量数据表格组件，提供排序、行选择与自定义渲染能力。

基础用法

示例即将加载...

<script setup lang="ts">
const columns = [
  { key: 'name', title: 'Name' },
  { key: 'role', title: 'Role' },
  { key: 'score', title: 'Score', sortable: true },
]

const data = [
  { id: 1, name: 'Ava', role: 'Designer', score: 92 },
  { id: 2, name: 'Noah', role: 'Engineer', score: 88 },
  { id: 3, name: 'Mia', role: 'PM', score: 95 },
]
</script>

<template>
  <TxDataTable :columns="columns" :data="data" striped bordered />
</template>

行选择

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const selectedKeys = ref([])
</script>

<template>
  <TxDataTable
    v-model:selected-keys="selectedKeys"
    :columns="columns"
    :data="data"
    row-key="id"
    selectable
  />
</template>

排序交互

可排序表头会暴露 aria-sort 状态，并支持鼠标点击、Enter 与 Space 在升序、降序、未排序之间切换。sortOnClient=false 时仍会触发 sortChange，但不会重排本地数据。

API

TxDataTable Props

属性名	类型	默认值	说明
`columns`	`DataTableColumn[]`	`[]`	列配置
`data`	`any[]`	`[]`	数据源
`rowKey`	`string \| (row, index) => string \| number`	`index`	行唯一标识
`loading`	`boolean`	`false`	加载状态
`emptyText`	`string`	`'No data'`	空数据提示
`striped`	`boolean`	`false`	斑马纹
`bordered`	`boolean`	`false`	表格边框
`hover`	`boolean`	`true`	悬浮高亮
`selectable`	`boolean`	`false`	是否可选择
`selectedKeys`	`Array<string \| number>`	`[]`	选中 key 列表
`defaultSort`	`{ key: string; order: 'asc' \| 'desc' \| null }`	`null`	默认排序
`sortOnClient`	`boolean`	`true`	是否前端排序

DataTableColumn

字段	类型	说明
`key`	`string`	列 key
`title`	`string`	表头文本
`dataIndex`	`string`	数据字段名
`width`	`string \| number`	列宽
`align`	`'left' \| 'center' \| 'right'`	对齐方式
`sortable`	`boolean`	是否可排序
`sorter`	`(a, b) => number`	自定义排序器
`format`	`(value, row, index) => string`	默认文本格式化
`headerClass`	`string`	表头 class
`cellClass`	`string`	单元格 class

Events

事件名	参数	说明
`update:selectedKeys`	`(keys)`	选中变化
`selectionChange`	`(keys)`	选中变化
`sortChange`	`(sort)`	排序变化
`rowClick`	`({ row, index })`	行点击

Slots

名称	说明
`header-<columnKey>`	自定义表头
`cell-<columnKey>`	自定义单元格
`empty`	空状态