vue 甘特图 vxe-gantt 实现 table 表格与甘特图拖拽双向联动、拖拽添加，拖拽移除

在复杂的项目管理场景中，使命数据通常分散在差别的视图中——一部分使命在表格中展示，另一部分在甘特图中出现。假如能让用户在表格和甘特图之间自由拖拽使命，实现数据的跨视图联动，将极大提升使命编排的服从。
vxe-gantt 通过 row-drag-config.isCrossTableDrag 设置，支持表格组件与甘特图组件之间的跨表拖拽，让使命可以在差别组件间自由移动。同时，内置的 CRUD 管理器会主动纪录每次拖拽产生的数据变动（新增、删除、修改），方便开辟者举行后续处理处罚。
本文先容跨表拖拽的设置方法、核心机制与完备示例。
核心设置

跨表拖拽必要同时设置源组件和目标组件，两者缺一不可：
设置项范例阐明rowConfig.dragBoolean必须设为 true，启用行拖拽功能。rowConfig.keyFieldString必须指定命据唯一主键字段名（如 'id'），确保跨表拖拽时数据不杂乱。rowDragConfig.isCrossTableDragBoolean必须设为 true，允许跨表格/跨组件拖拽。rowDragConfig.isCrossDragBoolean发起设为 true，允许跨层级拖拽（假如数据有父子布局）。treeConfigObject假如数据为树形布局，需设置 transform: true、rowField 和 parentField。告急提示：跨表拖拽要求全部加入拖拽的表格/甘特图使用雷同的主键字段名（由 keyField 指定），且数据主键不能重复，否则拖拽将导致数据繁芜或报错。
核心机制：CRUD 管理器主动追踪变动

跨表拖拽的本质是数据的跨组件移动——当用户将一个使命从表格拖到甘特图时，源组件会删除该行数据，目标组件会新增该行数据。
vxe-gantt 内置的 CRUD 管理器会主动纪录这些操纵，开辟者可以通过 getRecordset() 方法获取完备的变动纪录集：

1. const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()

复制代码

返回值阐明insertRecords新增的数据行（拖拽进入的目标组件）removeRecords删除的数据行（拖拽脱离的源组件）updateRecords修改的数据行这一机制让开辟者无需手动追踪数据变革，直接调用 API 即可得到完备的操纵清单，便于提交后端举行长期化。
代码

表格组件与一个甘特图组件之间的双向拖拽联动。

1. <template>
2.   
3.     <vxe-button status="success" @click="resultEvent1">获取数据1</vxe-button>
4.     <vxe-grid ref="gridRef1" v-bind="gridOptions1"></vxe-grid>
6.     支持上方表格与下方甘特图互相拖拽任务
8.     <vxe-button status="success" @click="resultEvent2">获取数据2</vxe-button>
9.     <vxe-gantt ref="ganttRef2" v-bind="ganttOptions2"></vxe-gantt>
10.   
11. </template>

复制代码

阐明

1. 主键唯一性（最告急）

跨表拖拽依靠主键来辨认数据行。全部加入拖拽的组件必须使用雷同的主键字段名（通过 keyField 指定），且全部数据的主键值全局唯一——不能出现两个组件中有雷同 id 的使命。
假如主键重复，拖拽时组件无法区分数据归属，会导致数据繁芜或报错
2. 树形布局的支持

假如数据存在父子层级（如示例中的 parentId 字段），必要设置 treeConfig：

1. treeConfig: {
2.   transform: true,      // 启用树形数据转换
3.   rowField: 'id',       // 行主键字段
4.   parentField: 'parentId' // 父级关联字段
5. }

复制代码

共同 isCrossDrag: true，可以支持跨层级的拖拽（如将子使命拖拽为另一个父使命的子使命）。
3. 拖拽把手的设置

在 columns 中，必要至少有一列设置 dragSort: true 作为拖拽把手：

1. { field: 'title', title: '任务名称', dragSort: true }

复制代码

必要拖拽该列所在的行或单元格才气触发拖拽运动。
CRUD 管理器 API 速查

方法返回值阐明getRecordset()获取完备的变动纪录集。getFullData()Array获取当前全部数据（包罗拖拽后的终极状态）。getInsertRecords()Array仅获取新增的数据行。getRemoveRecords()Array仅获取被删除的数据行。getUpdateRecords()Array仅获取被修改的数据行。vxe-gantt 的跨表拖拽功能通过 row-drag-config.isCrossTableDrag 设置，实现了表格与甘特图之间的双向数据联动。其核心上风在于：
✅ 设置简单：只需同时开启源和目标组件的 isCrossTableDrag。
✅ 主动追踪：内置 CRUD 管理器主动纪录每一次拖拽产生的数据变动。
✅ 树形支持：共同 treeConfig 可支持带父子层级的数据拖拽。
✅ 机动联动：不但支持表格 ↔ 甘特图，也支持多个表格或甘特图之间的相互拖拽。
只需确保数据主键全局唯一，并精确设置两端组件，即可快速实现跨视图的使命编排本领。
https://gantt.vxeui.com

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.