赖琳芳 发表于 3 天前

如何使用 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

来源:豆瓜网用户自行投稿发布,如果侵权,请联系站长删除
页: [1]
查看完整版本: 如何使用 vxe-table 实现穿梭框的功能,同时还能支持数据拖拽穿梭