Table 表格 - 列拖拽

通过 drag-config 配置列拖拽功能，支持拖拽调整列顺序、自定义拖拽样式、拖拽事件监听等能力。

拖拽调整列顺序

设置 drag-config 的 column: true 开启列拖拽排序。拖拽表头列即可调整列的显示顺序。

拖拽调整列顺序

冻结列

列拖拽与固定列 (fixed) 配合使用。固定列不参与拖拽，仅中间非固定列可拖拽排序。可通过列级别 draggable 属性精确控制。

冻结列 + 列拖拽

个性化列

结合列拖拽和列显隐功能，实现列的个性化配置。用户可以勾选要显示的列，并拖拽调整顺序。

个性化列（显隐 + 拖拽）

拖拽事件

通过 drag-config 的 onDragStart 和 onDragEnd 回调监听列拖拽事件。

列拖拽事件

分组表头

列拖拽可与分组表头 (children) 配合使用，拖拽分组表头可整体移动列组。

分组表头 + 列拖拽

同时行与列拖拽

设置 drag-config 的 row: true 和 column: true 可同时开启行和列拖拽。拖拽表头调整列顺序，拖拽数据行调整行顺序。

同时行与列拖拽

API

DragConfig 拖拽配置（列拖拽相关）

通过 drag-config 属性传入。

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

TableColumn Props（列拖拽相关）

属性	说明	类型	默认值
draggable	该列是否可拖拽排序	boolean	—
visible	列是否可见	boolean	true

事件

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

方法（通过 ref 调用）

方法名	说明	参数
getColumns	获取当前列信息	—
setColumnVisible	设置列可见性	(prop: string, visible: boolean)
resetColumns	重置所有列为可见	—

注意事项

1. 固定列不可拖拽：设置了 fixed 的列默认不参与拖拽排序。
2. 列级别控制：通过列配置的 draggable 属性可以精确控制每一列是否可拖拽。
3. 响应式列配置：使用 ref 包裹 columns 配置，拖拽后列顺序会自动更新。
4. 行列同时拖拽：同时设置 row: true 和 column: true 即可同时支持行和列拖拽，表格会自动区分操作区域。