Table 表格 - 行拖拽

通过 drag-config 配置行拖拽功能，支持拖拽排序、拖拽手柄、拖拽事件监听等能力。

拖拽调整行顺序

设置 drag-config 的 row: true 开启行拖拽排序。鼠标按住行即可拖动。

拖拽调整行顺序

自定义拖拽手柄

通过 drag-config.handle 指定拖拽手柄的 CSS 选择器，仅在手柄区域拖动才能触发拖拽，避免误操作。

拖拽手柄

冻结列 + 拖拽

行拖拽可以与固定列 (fixed) 配合使用。

冻结列 + 行拖拽

拖拽事件

通过 drag-config 的 onDragStart 和 onDragEnd 回调，或监听 drag-end 事件，获取拖拽状态信息。

拖拽事件

树结构拖拽

行拖拽可以与树形数据 (tree-config) 配合使用，支持拖拽树节点调整顺序。

树形数据拖拽

API

DragConfig 拖拽配置

通过 drag-config 属性传入。

属性	说明	类型	默认值
row	是否可拖拽行	boolean	false
column	是否可拖拽列	boolean	false
handle	拖拽手柄 CSS 选择器	string	—
animation	动画时长（毫秒）	number	150
onDragStart	拖拽开始回调	({ type, data, index }) => void	—
onDragEnd	拖拽结束回调	({ type, oldIndex, newIndex, data }) => void	—
crossTable	是否支持跨表格拖拽	boolean	false
dragClass	拖拽时的样式类	string	—
ghostClass	幽灵元素样式类	string	—

事件

事件名	说明	参数
drag-end	拖拽结束时触发	{ type: 'row' | 'column', oldIndex: number, newIndex: number, data: unknown[] }

onDragStart 回调参数

参数	说明	类型
type	拖拽类型	'row' | 'column'
data	被拖拽的数据	unknown
index	被拖拽的索引	number

onDragEnd 回调参数

参数	说明	类型
type	拖拽类型	'row' | 'column'
oldIndex	拖拽前索引	number
newIndex	拖拽后索引	number
data	拖拽后的数据	unknown[]