如何用 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.valueif ($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.valueif ($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