找回密码
 立即注册
首页 资源区 代码 vue 如何使用 vxe-table 来实现跨表拖拽,多表联动互相 ...

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

亢安芙 昨天 22:33
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个表格,需求是实现跨表格直接可以互相拖拽
1.gif

代码

多表格直接互相拖拽需要确保数据主键不重复,通过 row-config.keyField 指定主键字段名
  1. <template>
  2.   
  3.     <vxe-button status="success" @click="resultEvent1">获取数据1</vxe-button>
  4.     <vxe-grid ref="gridRef1" v-bind="gridOptions1"></vxe-grid>
  5.     <vxe-button status="success" @click="resultEvent2">获取数据2</vxe-button>
  6.     <vxe-grid ref="gridRef2" v-bind="gridOptions2"></vxe-grid>
  7.     <vxe-button status="success" @click="resultEvent3">获取数据3</vxe-button>
  8.     <vxe-grid ref="gridRef3" v-bind="gridOptions3"></vxe-grid>
  9.   
  10. </template>
复制代码
https://gitee.com/x-extends/vxe-table

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册