如何用 vxe-table 实现2个树表格可以互相拖拽数据

如何用 vxe-table 实现2个树表格可以互相拖拽数据
row-drag-config.isCrossTableDrag 启用跨表格、多表格互相拖拽。

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

效果

代码

跨表拖拽需要确保数据主键不重复，通过 row-config.keyField 指定主键字段名

<template>  <div>    <vxe-button status="success" @click="resultEvent1">获取数据1</vxe-button>    <vxe-grid ref="gridRef1" v-bind="gridOptions1"></vxe-grid>    <vxe-button status="success" @click="resultEvent2">获取数据2</vxe-button>    <vxe-grid ref="gridRef2" v-bind="gridOptions2"></vxe-grid>  </div></template><script setup>import { ref, reactive } from 'vue'import { VxeUI } from 'vxe-pc-ui'const gridRef1 = ref()const gridOptions1 = reactive({  border: true,  height: 300,  rowConfig: {    drag: true,    keyField: 'id'  },  rowDragConfig: {    isCrossDrag: true, // 允许跨级    isCrossTableDrag: true // 允许跨表  },  treeConfig: {    transform: true,    rowField: 'id',    parentField: 'parentId'  },  columns: [    { type: 'seq', width: 70 },    { field: 'name', title: 'Name', minWidth: 300, treeNode: true, dragSort: true },    { field: 'size', title: 'Size' },    { field: 'type', title: 'Type' },    { field: 'date', title: 'Date' }  ],  data: [    { id: 110000, parentId: null, name: 'Test101', type: 'mp3', size: 1024, date: '2020-08-01' },    { id: 110050, parentId: null, name: 'Test102', type: 'mp4', size: 0, date: '2021-04-01' },    { id: 124300, parentId: 110050, name: 'Test103', type: 'avi', size: 1024, date: '2020-03-01' },    { id: 120045, parentId: 124300, name: 'Test104', type: 'html', size: 600, date: '2021-04-01' },    { id: 110053, parentId: 124300, name: 'Test105', type: 'avi', size: 0, date: '2021-04-01' },    { id: 124330, parentId: 110053, name: 'Test106', type: 'txt', size: 25, date: '2021-10-01' },    { id: 121011, parentId: 110053, name: 'Test107', type: 'pdf', size: 512, date: '2020-01-01' },    { id: 122200, parentId: 110053, name: 'Test108', type: 'js', size: 1024, date: '2021-06-01' },    { id: 123666, parentId: null, name: 'Test109', type: 'xlsx', size: 2048, date: '2020-11-01' },    { id: 123677, parentId: 123666, name: 'Test110', type: 'js', size: 1024, date: '2021-06-01' },    { id: 123671, parentId: 123677, name: 'Test111', type: 'js', size: 1024, date: '2021-06-01' },    { id: 123672, parentId: 123677, name: 'Test112', type: 'js', size: 1024, date: '2021-06-01' },    { id: 123688, parentId: 123666, name: 'Test113', type: 'js', size: 1024, date: '2021-06-01' },    { id: 123681, parentId: 123688, name: 'Test114', type: 'js', size: 1024, date: '2021-06-01' },    { id: 123682, parentId: 123688, name: 'Test115', type: 'js', size: 1024, date: '2021-06-01' },    { id: 124555, parentId: null, name: 'Test116', type: 'avi', size: 224, date: '2020-10-01' },    { id: 124566, parentId: 124555, name: 'Test117', type: 'js', size: 1024, date: '2021-06-01' },    { id: 124577, parentId: 124555, name: 'Test118', type: 'js', size: 1024, date: '2021-06-01' }  ]})const resultEvent1 = () => {  const $grid = gridRef1.value  if ($grid) {    const { insertRecords, removeRecords } = $grid.getRecordset()    const tableData = $grid.getFullData()    VxeUI.modal.message({      content: `新增：${insertRecords.length} 删除：${removeRecords.length} 现有：${tableData.length}`,      status: 'success'    })  }}const gridRef2 = ref()const gridOptions2 = reactive({  border: true,  height: 300,  rowConfig: {    drag: true,    keyField: 'id'  },  rowDragConfig: {    isCrossDrag: true, // 允许跨级    isCrossTableDrag: true // 允许跨表  },  treeConfig: {    transform: true,    rowField: 'id',    parentField: 'parentId'  },  columns: [    { type: 'seq', width: 70 },    { field: 'name', title: 'Name', minWidth: 300, treeNode: true, dragSort: true },    { field: 'size', title: 'Size' },    { field: 'type', title: 'Type' },    { field: 'date', title: 'Date' }  ],  data: [    { id: 210000, parentId: null, name: 'Test201', type: 'mp3', size: 1024, date: '2020-08-01' },    { id: 210050, parentId: null, name: 'Test202', type: 'mp4', size: 0, date: '2021-04-01' },    { id: 224300, parentId: 210050, name: 'Test203', type: 'avi', size: 1024, date: '2020-03-01' },    { id: 220045, parentId: 224300, name: 'Test204', type: 'html', size: 600, date: '2021-04-01' },    { id: 210053, parentId: 224300, name: 'Test205', type: 'avi', size: 0, date: '2021-04-01' },    { id: 224330, parentId: 210053, name: 'Test206', type: 'txt', size: 25, date: '2021-10-01' },    { id: 221011, parentId: 210053, name: 'Test207', type: 'pdf', size: 512, date: '2020-01-01' },    { id: 222200, parentId: 210053, name: 'Test208', type: 'js', size: 1024, date: '2021-06-01' },    { id: 223666, parentId: null, name: 'Test209', type: 'xlsx', size: 2048, date: '2020-11-01' },    { id: 223677, parentId: 223666, name: 'Test210', type: 'js', size: 1024, date: '2021-06-01' },    { id: 223671, parentId: 223677, name: 'Test211', type: 'js', size: 1024, date: '2021-06-01' },    { id: 223672, parentId: 223677, name: 'Test212', type: 'js', size: 1024, date: '2021-06-01' },    { id: 223688, parentId: 223666, name: 'Test213', type: 'js', size: 1024, date: '2021-06-01' },    { id: 223681, parentId: 223688, name: 'Test214', type: 'js', size: 1024, date: '2021-06-01' },    { id: 223682, parentId: 223688, name: 'Test215', type: 'js', size: 1024, date: '2021-06-01' },    { id: 224555, parentId: null, name: 'Test216', type: 'avi', size: 224, date: '2020-10-01' },    { id: 224566, parentId: 224555, name: 'Test217', type: 'js', size: 1024, date: '2021-06-01' },    { id: 224577, parentId: 224555, name: 'Test218', type: 'js', size: 1024, date: '2021-06-01' }  ]})const resultEvent2 = () => {  const $grid = gridRef2.value  if ($grid) {    const { insertRecords, removeRecords } = $grid.getRecordset()    const tableData = $grid.getFullData()    VxeUI.modal.message({      content: `新增：${insertRecords.length} 删除：${removeRecords.length} 现有：${tableData.length}`,      status: 'success'    })  }}</script>

https://gitee.com/x-extends/vxe-table