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

来源：https://www.cnblogs.com/qaz666/p/19085050