Table 表格 - 行拖拽
通过 drag-config 配置行拖拽功能，支持拖拽排序、拖拽手柄、拖拽事件监听等能力。
拖拽调整行顺序
设置 drag-config 的 row: true 开启行拖拽排序。鼠标按住行即可拖动。
序号 | 姓名 | 年龄 | 部门 |
|---|
1 | 张三 | 28 | 技术部 |
2 | 李四 | 32 | 产品部 |
3 | 王五 | 25 | 设计部 |
4 | 赵六 | 30 | 运营部 |
5 | 钱七 | 27 | 市场部 |
6 | 孙八 | 35 | 人事部 |
拖拽调整行顺序
自定义拖拽手柄
通过 drag-config.handle 指定拖拽手柄的 CSS 选择器，仅在手柄区域拖动才能触发拖拽，避免误操作。
序号 | 任务名称 | 优先级 | 状态 |
|---|
☰ | 1 | 需求评审 | 高 | 进行中 |
☰ | 2 | UI 设计 | 高 | 已完成 |
☰ | 3 | 前端开发 | 中 | 待开始 |
☰ | 4 | 后端开发 | 中 | 待开始 |
☰ | 5 | 测试 | 低 | 待开始 |
☰ | 6 | 上线 | 低 | 待开始 |
拖拽手柄
冻结列 + 拖拽
行拖拽可以与固定列 (fixed) 配合使用。
ID | 姓名 | 部门 | 职位 | 薪资 | 城市 | 手机号 |
|---|
1 | 张三 | 技术部 | 前端工程师 | 15000 | 北京 | 13800001111 |
2 | 李四 | 产品部 | 产品经理 | 18000 | 上海 | 13800002222 |
3 | 王五 | 设计部 | UI 设计师 | 14000 | 广州 | 13800003333 |
4 | 赵六 | 运营部 | 运营总监 | 22000 | 深圳 | 13800004444 |
5 | 钱七 | 市场部 | 市场经理 | 16000 | 杭州 | 13800005555 |
冻结列 + 行拖拽
拖拽事件
通过 drag-config 的 onDragStart 和 onDragEnd 回调，或监听 drag-end 事件，获取拖拽状态信息。
排序 | 名称 | ID |
|---|
1 | 第一项 | 1 |
2 | 第二项 | 2 |
3 | 第三项 | 3 |
4 | 第四项 | 4 |
5 | 第五项 | 5 |
事件日志：
拖拽行以查看事件日志
拖拽事件
树结构拖拽
行拖拽可以与树形数据 (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[] |