如何使用 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 指定主键字段名

代码

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

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