carx漂移赛车2苹果手机版
3G · 2025-09-12
如何用 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>
