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