登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 资源区 › 代码 ›如何使用 vxe-table 实现穿梭框的功能，同时还能支持数 ...

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

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

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

拖拽穿梭

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

代码
  1. <template>
  2.   
  3.    
  4.       
  5.         <vxe-grid ref="gridRef1" v-bind="gridOptions1"></vxe-grid>
  6.       
  7.       
  8.         <vxe-button status="primary" icon="vxe-icon-arrow-double-right"  @click="addEvent"></vxe-button>
  9.         <vxe-button status="error" icon="vxe-icon-arrow-double-left"  @click="delEvent"></vxe-button>
  10.       
  11.       
  12.         <vxe-grid ref="gridRef2" v-bind="gridOptions2"></vxe-grid>
  13.       
  14.    
  15.   
  16. </template>
复制代码
https://gitee.com/x-extends/vxe-table

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

使用道具 举报

相关推荐
渣骑
15 小时前

举报

这个好，看起来很实用
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
丰江
15 小时前

0

粉丝关注

19

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫