社区 › 代码 › vue 如何使用 vxe-table 来实现跨表拖拽，多表联动互相拖拽数据

亢安芙 发表于 2025-8-27 22:33:54

vue 如何使用 vxe-table 来实现跨表拖拽，多表联动互相拖拽数据

vue 如何使用 vxe-table 来实现跨表拖拽，多表联动互相拖拽数据
row-drag-config.isCrossTableDrag 启用跨表格、多表格互相拖拽；跨表拖拽需要确保数据主键不重复，通过 row-config.keyField 指定主键字段名
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
效果

例如。页面上加载3个表格，需求是实现跨表格直接可以互相拖拽

代码

多表格直接互相拖拽需要确保数据主键不重复，通过 row-config.keyField 指定主键字段名
<template>

    <vxe-button status="success" @click="resultEvent1">获取数据1</vxe-button>
    <vxe-grid ref="gridRef1" v-bind="gridOptions1"></vxe-grid>

    <vxe-button status="success" @click="resultEvent2">获取数据2</vxe-button>
    <vxe-grid ref="gridRef2" v-bind="gridOptions2"></vxe-grid>

    <vxe-button status="success" @click="resultEvent3">获取数据3</vxe-button>
    <vxe-grid ref="gridRef3" v-bind="gridOptions3"></vxe-grid>

</template>https://gitee.com/x-extends/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

渭茱瀑 发表于 2025-12-14 22:30:57

这个好，看起来很实用

焦和玉 发表于 2025-12-15 17:30:14

yyds。多谢分享

啤愿 发表于 2025-12-22 16:55:04

收藏一下   不知道什么时候能用到

昝沛珊 发表于 2025-12-23 21:10:23

这个有用。

啸妹回 发表于 2025-12-26 18:56:08

不错，里面软件多更新就更好了

怒鼓踊 发表于 2025-12-31 06:41:12

这个好，看起来很实用

金娅鸣 发表于 2026-1-6 03:54:28

不错，里面软件多更新就更好了

骆贵 发表于 2026-1-14 14:20:37

谢谢分享，试用一下

觞刈 发表于 2026-1-18 12:46:54

谢谢楼主提供！

左优扬 发表于 2026-1-18 21:28:35

这个好，看起来很实用

供挂 发表于 2026-1-20 01:07:48

谢谢分享，试用一下

忆雏闲 发表于 2026-1-20 14:28:01

感谢，下载保存了

殳世英 发表于 2026-1-22 22:07:14

感谢分享，学习下。

呵烘稿 发表于 2026-1-23 02:35:26

谢谢分享，辛苦了

零幸 发表于 2026-1-24 12:41:02

谢谢楼主提供！

寨重 发表于 2026-1-25 09:57:02

谢谢分享，试用一下

喜及眩 发表于 2026-1-27 03:16:26

很好很强大我过来先占个楼 待编辑

师佳思 发表于 2026-1-29 05:08:52

谢谢分享，辛苦了

剧拧并 发表于 2026-1-30 10:30:48

很好很强大我过来先占个楼 待编辑

查看完整版本: vue 如何使用 vxe-table 来实现跨表拖拽，多表联动互相拖拽数据