Table 表格 - 列拖拽

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

拖拽调整列顺序

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

拖拽表头列可调整列的顺序

ID	姓名	年龄	部门	职位	城市

1	张三	28	技术部	前端工程师	北京
2	李四	32	产品部	产品经理	上海
3	王五	25	设计部	UI 设计师	广州
4	赵六	30	运营部	运营总监	深圳
5	钱七	27	市场部	市场经理	杭州

拖拽调整列顺序

冻结列

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

固定列不参与拖拽，仅中间非固定列可拖拽排序

ID	姓名	部门	职位	薪资	城市	手机号

1	张三	技术部	前端工程师	15000	北京	13800001111
2	李四	产品部	产品经理	18000	上海	13800002222
3	王五	设计部	UI 设计师	14000	广州	13800003333
4	赵六	运营部	运营总监	22000	深圳	13800004444

冻结列 + 列拖拽

个性化列

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

ID 姓名 年龄 部门 职位 邮箱 城市

ID	姓名	年龄	部门	职位

1	张三	28	技术部	前端工程师
2	李四	32	产品部	产品经理
3	王五	25	设计部	UI 设计师

个性化列（显隐 + 拖拽）

拖拽事件

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

ID	姓名	年龄	部门

1	张三	28	技术部
2	李四	32	产品部
3	王五	25	设计部

事件日志：

拖拽列以查看事件日志

列拖拽事件

分组表头

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

基本信息			地址信息
ID	姓名	年龄	省份	城市	详细地址	邮编

1	张三	28	北京	朝阳区	建国路88号	100020
2	李四	32	上海	浦东新区	陆家嘴环路	200120
3	王五	25	广东	天河区	珠江新城	510623

分组表头 + 列拖拽

同时行与列拖拽

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

同时支持拖拽行和拖拽列。拖拽表头可调整列顺序，拖拽行体可调整行顺序。

ID	姓名	年龄	部门	评分

1	张三	28	技术部	92
2	李四	32	产品部	88
3	王五	25	设计部	95
4	赵六	30	运营部	85
5	钱七	27	市场部	90

同时行与列拖拽

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 即可同时支持行和列拖拽，表格会自动区分操作区域。