X-Next

Appearance

Table 表格 ​

用于数据收集展示、分析整理和操作处理，适合中后台列表、配置项矩阵、数据明细和可批量处理的记录集合。

何时使用 ​

  • 需要展示结构化数据，并支持排序、筛选、分页、滚动或固定列。
  • 需要对数据行进行选择、展开、拖拽、合并或汇总。
  • 需要通过插槽或渲染函数定制表头、单元格、空态、分页两侧内容或内部表格元素。

基础用法 ​

名称类型状态
Button通用稳定
Select表单维护中
Table数据展示改造中
vue
<template>
  <x-table :columns="columns" :data="data" />
</template>

<script setup lang="ts">
const columns = [
  { title: '名称', dataIndex: 'name' },
  { title: '类型', dataIndex: 'type' },
  { title: '状态', dataIndex: 'status' },
];
const data = [
  { key: '1', name: 'Button', type: '通用', status: '稳定' },
  { key: '2', name: 'Select', type: '表单', status: '维护中' },
  { key: '3', name: 'Table', type: '数据展示', status: '改造中' },
];
</script>

声明式列 ​

vue
<template>
  <x-table :data="data" :pagination="false">
    <x-table-column title="名称" data-index="name" />
    <x-table-column title="状态" data-index="status" />
  </x-table>
</template>

<script setup lang="ts">
const data = [
  { key: '1', name: 'Button', status: '稳定' },
  { key: '2', name: 'Table', status: '维护中' },
];
</script>

尺寸和边框 ​

规格说明
large默认尺寸
small紧凑展示
规格说明
large默认尺寸
small紧凑展示
vue
<template>
  <x-table :columns="columns" :data="data" size="small" :pagination="false" />
  <x-table
    :columns="columns"
    :data="data"
    size="mini"
    :bordered="{ wrapper: true, cell: true }"
    :pagination="false"
  />
</template>

行选择器 ​

姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
当前选中：1, 2
vue
<template>
  <x-table
    v-model:selected-keys="selectedKeys"
    :columns="columns"
    :data="data"
    :row-selection="{ type: 'checkbox', showCheckedAll: true, onlyCurrent: false }"
    :pagination="{ pageSize: 3 }"
  />
</template>

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

const selectedKeys = ref(['1', '2']);
</script>

单选 ​

姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
Ed Hellen17000Tokyoed.hellen@example.com
William Smith27000Londonwilliam.smith@example.com
Nina Brown30000Parisnina.brown@example.com
vue
<template>
  <x-table
    v-model:selected-keys="selectedKeys"
    :columns="columns"
    :data="data"
    :row-selection="{ type: 'radio' }"
    :pagination="false"
  />
</template>

展开行 ​

展开姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
负责组件库基础能力和设计规范维护。
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
Ed Hellen17000Tokyoed.hellen@example.com
William Smith27000Londonwilliam.smith@example.com
Nina Brown30000Parisnina.brown@example.com
vue
<template>
  <x-table
    v-model:expanded-keys="expandedKeys"
    :columns="columns"
    :data="data"
    :expandable="{ title: '展开', width: 72 }"
  >
    <template #expand-row="{ record }">
      {{ record.expand || `${record.name} 暂无额外说明。` }}
    </template>
  </x-table>
</template>

树形数据 ​

名称类型状态
数据录入表单稳定
Input表单稳定
Select表单维护中
数据展示展示改造中
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :default-expanded-keys="['1']"
    :pagination="false"
  />
</template>

排序和筛选 ​

姓名
薪资
城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
Ed Hellen17000Tokyoed.hellen@example.com
William Smith27000Londonwilliam.smith@example.com
Nina Brown30000Parisnina.brown@example.com
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :filter-icon-align-left="alignLeft"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    sortable: { sortDirections: ['ascend', 'descend'] },
  },
  {
    title: '薪资',
    dataIndex: 'salary',
    filterable: {
      filters: [{ text: '20000 以上', value: '20000' }],
      filter: (values, record) => values.some((value) => record.salary > Number(value)),
      multiple: true,
    },
  },
];
</script>

可排序表头可通过 Tab 聚焦，并使用 Enter 或 Space 切换排序；读屏软件可从 aria-sort 获得当前顺序。筛选图标为原生按钮，会通过 aria-expanded 和 aria-controls 关联筛选弹层。

分组表头、滚动和固定列 ​

用户工作信息状态
姓名城市薪资邮箱
Jane DoeLondon23000jane.doe@example.com跟进中
Alisa RossParis25000alisa.ross@example.com跟进中
Kevin SandraLondon22000kevin.sandra@example.com跟进中
Ed HellenTokyo17000ed.hellen@example.com跟进中
William SmithLondon27000william.smith@example.com高绩效
Nina BrownParis30000nina.brown@example.com高绩效
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :scroll="{ x: 900, y: 220 }"
    :pagination="false"
  />
</template>

单元格合并 ​

姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000alisa.ross@example.com
Kevin Sandrakevin.sandra@example.com
Ed Hellen17000Tokyoed.hellen@example.com
William Smith27000Londonwilliam.smith@example.com
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :span-method="spanMethod"
    :bordered="{ wrapper: true, cell: true }"
  />
</template>

<script setup lang="ts">
const spanMethod = ({ rowIndex, columnIndex }) => {
  if (rowIndex === 1 && columnIndex === 1) {
    return { rowspan: 2, colspan: 2 };
  }
};
</script>

总结行 ​

姓名薪资项目数缺陷数
Jane Doe2300042
Alisa Ross2500051
Kevin Sandra2200034
Ed Hellen1700023
合计870001410
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :summary="summary"
    summary-text="合计"
  />
</template>

<script setup lang="ts">
const summary = ({ data }) => {
  const total = data.reduce((acc, item) => {
    acc.salary += item.salary;
    return acc;
  }, { name: '合计', salary: 0 });
  return [total];
};
</script>

省略与文本提示 ​

列配置 ellipsis: true 时超出宽度会截断。再开启 tooltip 后，悬浮会显示完整内容；tooltip 也可传入对象以配置 Tooltip 的属性。

名称描述备注
Button用于触发即时操作，支持多种状态、形状与尺寸组合，是业务界面里最常见的动作入口这一段没有开启 tooltip，超出后直接截断
Table用于数据收集展示、分析整理和操作处理，适合中后台列表和配置项矩阵鼠标悬浮不会出现提示
vue
<template>
  <x-table :columns="columns" :data="data" :pagination="false" />
</template>

<script setup lang="ts">
const columns = [
  { title: '名称', dataIndex: 'name', width: 160 },
  // 截断并在悬浮时显示完整内容
  { title: '描述', dataIndex: 'desc', ellipsis: true, tooltip: true },
  // 只截断，不显示提示
  { title: '备注', dataIndex: 'remark', width: 120, ellipsis: true },
];
const data = [{ key: '1', name: 'Button', desc: '很长的描述文本……', remark: '备注' }];
</script>

吸顶表头 ​

stickyHeader 让表头在页面滚动时吸顶；传入数字可指定距离顶部的偏移量。需要纵向滚动时同时设置 scroll.y。

名称负责人状态
记录 1Jane已完成
记录 2Alisa处理中
记录 3Kevin已完成
记录 4Ed处理中
记录 5Jane已完成
记录 6Alisa处理中
记录 7Kevin已完成
记录 8Ed处理中
记录 9Jane已完成
记录 10Alisa处理中
记录 11Kevin已完成
记录 12Ed处理中
向下滚动页面，表头会吸附在距顶部 48px 处
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :sticky-header="48"
    :scroll="{ y: 220 }"
    :pagination="false"
  />
</template>

懒加载子树 ​

传入 loadMore 后展开箭头会在需要时异步拉取子节点。函数的第二个参数 done 用于回传子数据。

名称类型
研发中心部门
设计中心部门
点击展开箭头加载子节点，已加载 0 条
vue
<template>
  <x-table :columns="columns" :data="data" :load-more="loadMore" :pagination="false" />
</template>

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

const data = ref([{ key: 'dept-1', name: '研发中心', type: '部门' }]);

// done 回传子节点；子节点标记 isLeaf 后不再显示展开箭头
const loadMore = (record, done) => {
  setTimeout(() => {
    done([
      { key: `${record.key}-1`, name: `${record.name} · 小组 1`, type: '小组', isLeaf: true },
    ]);
  }, 400);
};
</script>

调整列宽 ​

姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
Ed Hellen17000Tokyoed.hellen@example.com
William Smith27000Londonwilliam.smith@example.com
Nina Brown30000Parisnina.brown@example.com
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    column-resizable
    :bordered="{ wrapper: true, cell: true }"
  />
</template>

拖拽排序 ​

姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
Ed Hellen17000Tokyoed.hellen@example.com
William Smith27000Londonwilliam.smith@example.com
等待拖拽
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :draggable="{ type: 'handle', width: 40 }"
    @change="handleChange"
  />
</template>

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

const data = ref([...]);
const handleChange = (nextData, extra) => {
  if (extra.type === 'drag') data.value = nextData;
};
</script>

行拖拽 ​

draggable.type 为 'row' 时整行可拖动；为 'handle' 时只通过手柄拖动（见上一节）。

姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
Ed Hellen17000Tokyoed.hellen@example.com
拖动任意一行调整顺序
vue
<template>
  <x-table :columns="columns" :data="data" :draggable="{ type: 'row' }" @change="onChange" />
</template>

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

const data = ref([...]);

const onChange = (nextData, extra) => {
  if (extra.type === 'drag') data.value = nextData;
};
</script>

可编辑单元格 ​

Table 没有内置的编辑态，用列的 cell 插槽即可实现：双击切换到输入控件，失焦或回车后写回数据。

名称状态负责人
Button待处理Jane
Table处理中Alisa
Select已完成Kevin
双击「状态」单元格即可编辑
vue
<template>
  <x-table :columns="columns" :data="data" :pagination="false">
    <template #statusCell="{ record }">
      <!-- 非编辑态：双击进入编辑 -->
      <span v-if="!record.editing" @dblclick="startEdit(record)">{{ record.status }}</span>
      <!-- 编辑态：写入后退出 -->
      <x-select
        v-else
        :model-value="record.status"
        :options="options"
        @change="(value) => apply(record, value)"
      />
    </template>
  </x-table>
</template>

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

const columns = [
  { title: '名称', dataIndex: 'name' },
  // slotName 与 template 名一致
  { title: '状态', dataIndex: 'status', slotName: 'statusCell' },
];
const data = ref([{ key: '1', name: 'Button', status: '待处理', editing: false }]);

const startEdit = (record) => {
  data.value = data.value.map((item) => ({ ...item, editing: item.key === record.key }));
};
const apply = (record, value) => {
  data.value = data.value.map((item) =>
    item.key === record.key ? { ...item, status: value, editing: false } : item,
  );
};
</script>

虚拟列表 ​

编号任务状态负责人
1任务 1待处理Jane
2任务 2处理中Alisa
3任务 3已完成Kevin
4任务 4待处理Ed
5任务 5处理中Jane
6任务 6已完成Alisa
7任务 7待处理Kevin
8任务 8处理中Ed
9任务 9已完成Jane
10任务 10待处理Alisa
11任务 11处理中Kevin
12任务 12已完成Ed
13任务 13待处理Jane
14任务 14处理中Alisa
15任务 15已完成Kevin
16任务 16待处理Ed
17任务 17处理中Jane
18任务 18已完成Alisa
19任务 19待处理Kevin
20任务 20处理中Ed
21任务 21已完成Jane
22任务 22待处理Alisa
23任务 23处理中Kevin
24任务 24已完成Ed
25任务 25待处理Jane
26任务 26处理中Alisa
27任务 27已完成Kevin
28任务 28待处理Ed
29任务 29处理中Jane
30任务 30已完成Alisa
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    :virtual-list-props="{ height: 260, fixedSize: true, estimatedSize: 48 }"
    :pagination="false"
  />
</template>

自定义渲染和插槽 ​

组件名称状态类型
Button稳定通用
Select维护中表单
Table改造中数据展示
当前展示 3 个组件。
vue
<template>
  <x-table :columns="columns" :data="data">
    <template #nameCell="{ record }">
      <strong>{{ record.name }}</strong>
    </template>
  </x-table>
</template>

空态和加载 ​

名称类型状态
暂无匹配数据
vue
<template>
  <x-table :columns="columns" :data="[]" :pagination="false">
    <template #empty>暂无匹配数据</template>
  </x-table>
  <x-table :columns="columns" :data="data" loading />
</template>

命令式方法 ​

通过 ref 调用 select / expand / resetFilters / clearSorters 等方法操作表格状态。

名称状态负责人
Button待处理Jane
Table处理中Alisa
Select已完成Kevin
尚未调用方法
vue
<template>
  <x-button @click="tableRef?.select('2', true)">选中第 2 行</x-button>
  <x-button @click="tableRef?.selectAll(true)">全选</x-button>
  <x-table ref="tableRef" :columns="columns" :data="data" :row-selection="{ type: 'checkbox' }" />
</template>

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

const tableRef = ref();
const data = [{ key: '1', name: 'Button' }, { key: '2', name: 'Table' }];
</script>

自定义筛选弹层 ​

filterable.slotName 指定弹层内容所用的具名插槽，插槽参数含 filterValue、setFilterValue、handleFilterConfirm、handleFilterReset。

名称状态负责人
Button待处理Jane
Table处理中Alisa
Select已完成Kevin
Input待处理Ed
未筛选
vue
<template>
  <x-table :columns="columns" :data="data" @filter-change="onFilterChange">
    <template #statusFilter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }">
      <x-checkbox-group :model-value="filterValue" @change="setFilterValue">
        <x-checkbox value="待处理">待处理</x-checkbox>
        <x-checkbox value="处理中">处理中</x-checkbox>
      </x-checkbox-group>
      <x-button size="mini" @click="handleFilterReset">重置</x-button>
      <x-button size="mini" type="primary" @click="handleFilterConfirm">确认</x-button>
    </template>
  </x-table>
</template>

<script setup lang="ts">
const columns = [
  { title: '名称', dataIndex: 'name' },
  {
    title: '状态',
    dataIndex: 'status',
    filterable: {
      filters: [{ text: '待处理', value: '待处理' }],
      filter: (values, record) => values.length === 0 || values.includes(record.status),
      multiple: true,
      // 与 template 名一致
      slotName: 'statusFilter',
    },
  },
];
</script>

自定义展开图标 ​

expand-icon 插槽可替换默认的展开箭头，参数为 { expanded, record }。

名称说明
Button触发即时操作
Table数据收集与展示
vue
<template>
  <x-table :columns="columns" :data="data" :expandable="{ expandedRowRender: render }">
    <template #expand-icon="{ expanded }">
      <span>{{ expanded ? '−' : '+' }}</span>
    </template>
  </x-table>
</template>

分页两侧与总结行插槽 ​

pagination-left / pagination-right 用于在分页器两侧补充内容；summary-cell 用于自定义总结行的单元格。

名称状态负责人
Button待处理Jane
Table处理中Alisa
合计
共 3 条记录
vue
<template>
  <x-table :columns="columns" :data="data" :pagination="{ pageSize: 2 }" :summary="true">
    <template #pagination-left>
      <span>共 {{ data.length }} 条记录</span>
    </template>
    <template #pagination-right>
      <x-button size="mini">刷新</x-button>
    </template>
  </x-table>
</template>
姓名薪资项目数
Jane Doe230004
Alisa Ross250005
Kevin Sandra220003
合计$70,00012
vue
<template>
  <x-table :columns="columns" :data="data" :summary="true">
    <!-- 参数为 { column, record, rowIndex } -->
    <template #summary-cell="{ column }">
      <strong>{{ summaryText(column) }}</strong>
    </template>
  </x-table>
</template>

事件回调 ​

姓名薪资城市邮箱
Jane Doe23000Londonjane.doe@example.com
Alisa Ross25000Parisalisa.ross@example.com
Kevin Sandra22000Londonkevin.sandra@example.com
vue
<template>
  <x-table
    :columns="columns"
    :data="data"
    @row-click="handleRowClick"
    @cell-click="handleCellClick"
    @header-click="handleHeaderClick"
  />
</template>

按需导入 ​

ts
import { Table, TableColumn } from 'x-next';

样式按需引入（base.css 为共享基础层，多个组件只需引入一次）：

ts
import 'x-next/style/base.css';
import 'x-next/style/table.css';

Table Props ​

参数说明类型默认值
columns表格列配置TableColumnData[][]
data表格数据TableData[][]
bordered是否显示边框boolean | TableBorderfalse
hoverable是否显示行悬浮效果booleantrue
stripe是否显示斑马纹booleanfalse
size表格尺寸'mini' | 'small' | 'medium' | 'large''large'
tableLayoutFixed是否使用 fixed 表格布局booleanfalse
loading是否加载中，object 会透传给 Spinboolean | objectfalse
rowSelection行选择配置TableRowSelection-
expandable展开行配置TableExpandable-
scroll滚动配置{ x?: number | string; y?: number | string; minWidth?: number | string; maxHeight?: number | string }-
pagination分页配置，传 false 可关闭分页boolean | PaginationPropstrue
pagePosition分页位置'tl' | 'top' | 'tr' | 'bl' | 'bottom' | 'br''br'
indentSize树形表格缩进距离number16
rowKey表格行 key 字段string'key'
showHeader是否显示表头booleantrue
virtualListProps虚拟列表配置，传入后开启虚拟滚动VirtualListProps-
spanMethod单元格合并方法(data) => { rowspan?: number; colspan?: number } | void-
spanAll合并方法索引是否包含操作列booleanfalse
components自定义内部操作列组织方式TableComponents-
loadMore树形数据懒加载函数(record, done) => void-
filterIconAlignLeft筛选图标是否左对齐booleanfalse
hideExpandButtonOnEmpty子树为空时是否隐藏展开按钮booleanfalse
rowClass行 class，支持函数string | any[] | object | ((record, rowIndex) => any)-
draggable拖拽排序配置TableDraggable-
columnResizable是否允许调整列宽booleanfalse
summary是否显示总结行，或自定义总结数据boolean | ((params) => TableData[])-
summaryText默认总结行首列文字string'Summary'
summarySpanMethod总结行单元格合并方法(data) => { rowspan?: number; colspan?: number } | void-
selectedKeys已选择行 key，受控模式(string | number)[]-
defaultSelectedKeys默认已选择行 key(string | number)[]-
expandedKeys已展开行 key，受控模式(string | number)[]-
defaultExpandedKeys默认展开行 key(string | number)[]-
defaultExpandAllRows是否默认展开全部行booleanfalse
stickyHeader是否开启表头吸顶，数字表示 top 偏移boolean | numberfalse
scrollbar是否使用自定义滚动条，或传入 Scrollbar 配置boolean | ScrollbarPropstrue
showEmptyTree是否展示空子树booleanfalse

Table Events ​

事件名说明回调参数
update:selectedKeys选中行变化时触发rowKeys
update:expandedKeys展开行变化时触发rowKeys
expand点击展开行时触发rowKey, record
expanded-change展开行变化时触发rowKeys
select点击行选择器时触发rowKeys, rowKey, record
select-all点击全选选择器时触发checked
selection-change已选择行变化时触发rowKeys
sorter-change排序规则变化时触发dataIndex, direction
filter-change筛选项变化时触发dataIndex, filteredValues
page-change分页页码变化时触发page
page-size-change每页数量变化时触发pageSize
change分页、排序、筛选、拖拽变化时触发data, extra, currentData
cell-mouse-enter鼠标进入单元格时触发record, column, event
cell-mouse-leave鼠标离开单元格时触发record, column, event
cell-click点击单元格时触发record, column, event
row-click点击行时触发record, event
header-click点击表头时触发column, event
column-resize调整列宽时触发dataIndex, width
row-dblclick双击行时触发record, event
cell-dblclick双击单元格时触发record, column, event
row-contextmenu右击行时触发record, event
cell-contextmenu右击单元格时触发record, column, event

Table Methods ​

方法名说明参数
selectAll设置全选状态checked?: boolean
select设置指定行选择状态rowKey, checked?: boolean
expandAll设置全部展开状态checked?: boolean
expand设置指定行展开状态rowKey, checked?: boolean
resetFilters重置列筛选器到默认值dataIndex?: string | string[]
clearFilters清空列筛选器dataIndex?: string | string[]
resetSorters重置列排序到默认值-
clearSorters清空列排序-

Table Slots ​

插槽名说明参数
defaultTableColumn 声明式列，或自定义 table 内容-
columnsTableColumn 声明式列-
expand-icon自定义展开图标{ expanded, record }
expand-row展开行内容{ record }
footer表格底部内容-
drag-handle-icon拖拽手柄图标-
tbody自定义 tbody 元素-
tr自定义 tr 元素{ record, rowIndex }
td自定义 td 元素{ record, column, rowIndex }
pagination-left分页器左侧内容-
pagination-right分页器右侧内容-
summary-cell总结行单元格{ column, record, rowIndex }
empty空态内容-
thead自定义 thead 元素-
th自定义 th 元素{ column }

TableColumn Props ​

参数说明类型默认值
dataIndex列字段名string-
title列标题string-
width列宽number-
minWidth最小列宽number-
align对齐方式'left' | 'center' | 'right'-
fixed固定位置'left' | 'right'-
ellipsis是否显示省略booleanfalse
tooltip省略时是否显示提示，或 Tooltip 配置boolean | objectfalse
sortable排序配置TableSortable-
filterable筛选配置TableFilterable-
cellClass单元格 classClassName-
headerCellClass表头单元格 classClassName-
bodyCellClass内容单元格 classClassName | ((record) => ClassName)-
summaryCellClass总结单元格 classClassName | ((record) => ClassName)-
cellStyle单元格样式CSSProperties-
headerCellStyle表头单元格样式CSSProperties-
bodyCellStyle内容单元格样式CSSProperties | ((record) => CSSProperties)-
summaryCellStyle总结单元格样式CSSProperties | ((record) => CSSProperties)-
index手动指定列序号，通常无需使用number-

TableColumn Slots ​

插槽名说明参数
cell单元格内容{ record, column, rowIndex }
title表头内容-
filter-content自定义筛选弹层内容{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }
filter-icon自定义筛选图标-

类型说明 ​

类型说明
TableData行数据，默认用 key 作为唯一标识，可包含 children、expand、disabled、isLeaf
TableSortable排序配置，包含 sortDirections、sorter、sortOrder、defaultSortOrder
TableFilterable筛选配置，包含 filters、filter、multiple、filteredValue、defaultFilteredValue、renderContent、icon、triggerProps、alignLeft、slotName
TableRowSelection行选择配置，包含 type、selectedRowKeys、defaultSelectedRowKeys、showCheckedAll、title、width、fixed、checkStrictly、onlyCurrent
TableExpandable展开行配置，包含 expandedRowKeys、defaultExpandedRowKeys、defaultExpandAllRows、expandedRowRender、icon、title、width、fixed
TableDraggable拖拽配置，包含 type、title、width、fixed
TableChangeExtrachange 事件附加信息，包含 type、page、pageSize、sorter、filters、dragTarget

元素插槽 ​

tbody、thead、tr、td、th 是内部元素插槽，可替换表格的原生元素（例如给 tbody 加原生属性、给 td 挂自定义指令）。

使用契约：插槽内只提供单一空元素，让 Table 把原有的 children、class、style 和事件合并到该元素上。若自行写死内容，会覆盖表格原本的行、列和事件结构。

名称状态
Button稳定
Table维护中
表格 tbody 已附加 data-custom-body 属性，可用开发者工具查看
vue
<template>
  <x-table :columns="columns" :data="data" :pagination="false">
    <!-- 只写单一空元素，Table 会把 children / class / 事件合并进来 -->
    <!-- tbody 插槽不接收参数：Table 会把 children/attrs 合并到返回的元素上 -->
    <template #tbody>
      <tbody data-custom-body="true" />
    </template>
  </x-table>
</template>

也可用于 tr / td / th / thead。tr / td / th 会传入行与列信息（见上方 Slots 表）；tbody 与 thead 不传参数——children、attrs 与事件统一由 Table 合并到插槽返回的元素上。

已知限制 ​

  • 拖拽排序仍是鼠标 / 触摸优先能力，暂未提供键盘拖拽替代路径。
  • 非受控分页下筛选、排序和每页数量变化会自动回到第一页；受控分页需要业务同步 pagination.current。