丰江 发表于 2025-9-2 14:26:34

如何使用 vxe-table 实现穿梭框的功能，同时还能支持数据拖拽穿梭

如何使用 vxe-table 实现穿梭框的功能，同时还能支持数据拖拽穿梭
使用 vxe-table 来实现该功能非常简单，以下的使用方法及说明
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
按钮穿梭

通过复选框选择来实现左右交换数据

拖拽穿梭

当使用拖拽穿梭数据时，需要确保数据主键不重复，通过 row-config.keyField 指定主键字段名

代码

<template>

   
      
      <vxe-grid ref="gridRef1" v-bind="gridOptions1"></vxe-grid>
      
      
      <vxe-button status="primary" icon="vxe-icon-arrow-double-right"@click="addEvent"></vxe-button>
      <vxe-button status="error" icon="vxe-icon-arrow-double-left"@click="delEvent"></vxe-button>
      
      
      <vxe-grid ref="gridRef2" v-bind="gridOptions2"></vxe-grid>
      
   

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

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

渣骑 发表于 2025-10-15 00:42:06

这个好，看起来很实用

赖秀竹 发表于 2025-11-5 03:39:16

感谢分享

仄谦 发表于 2025-11-29 06:17:50

喜欢鼓捣这些软件，现在用得少，谢谢分享！

缑莺韵 发表于 2025-12-11 03:07:28

这个好，看起来很实用

揉幽递 发表于 2025-12-14 18:30:02

喜欢鼓捣这些软件，现在用得少，谢谢分享！

蚬蕞遂 发表于 2025-12-22 21:04:15

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

猷浮 发表于 2025-12-23 01:05:00

过来提前占个楼

邹语彤 发表于 2026-1-13 18:44:57

感谢分享，学习下。

郏琼芳 发表于 2026-1-15 19:59:25

懂技术并乐意极积无私分享的人越来越少。珍惜

堠秉 发表于 2026-1-18 19:04:19

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

飧沾 发表于 2026-1-23 09:41:55

过来提前占个楼

崔和美 发表于 2026-1-26 09:10:46

热心回复！

搁胱 发表于 2026-1-26 12:42:54

这个好，看起来很实用

寨重 发表于 2026-2-1 20:07:42

感谢发布原创作品，程序园因你更精彩

汲佩杉 发表于 2026-2-3 05:04:35

谢谢分享，辛苦了

山芷兰 发表于 2026-2-4 11:39:19

这个好，看起来很实用

僻嘶 发表于 2026-2-5 01:41:00

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

龙骋唧 发表于 2026-2-6 11:00:23

懂技术并乐意极积无私分享的人越来越少。珍惜

任佳湍 发表于 2026-2-9 02:03:48

谢谢楼主提供！
页: [1] 2
查看完整版本: 如何使用 vxe-table 实现穿梭框的功能，同时还能支持数据拖拽穿梭