基于vue2+element 实现左向右两个树形tree的跨树拖拽？-灵析社区

取 消 确 定 export default { name: 'schemaModal', data() { return { jsonData: '', mappingDialog: false, defaultProps: { children: 'children', label: 'label' }, treeData1: [{ id: 1, label: "一级", children: [{ id: 4, label: "二级-1111", isFile: true, }, { id: 5, label: "二级-2222", isFile: true, }], }], treeData2: [{ id: 2, label: "一级-2222", children: [{ id: 6, label: "二级-3333", isFile: true, }, { id: 7, label: "二级-4444", isFile: true, }], }], } }, methods: { init(args) { this.mappingDialog = true; console.log(args, 123); this.treeData1 = [{ id: 1, label: "一级", children: [{ id: 4, label: "二级-1111", isFile: true, }, { id: 5, label: "二级-2222", isFile: true, }], }] this.treeData2= [{ id: 2, label: "一级-2222", children: [{ id: 6, label: "二级-3333", isFile: true, }, { id: 7, label: "二级-4444", isFile: true, }], }] }, handleClose() { this.mappingDialog = false; }, submit() { console.log(this.treeData2) }, renderTreeNode(h, { node, data, store }) { if (data.isFile) { return {data.label}; } else { return {data.label}; } }, //左侧节点触发拖拽 handleDragstart(node, event) { console.log('start', node, event) //在左侧节点触发拖拽的时候触发右侧节点的拖拽事件 this.$refs.treeOut.$emit('tree-node-drag-start', event, { node: node }); }, //拖拽结束，但是确定是否成功 handleInDragend(draggingNode, endNode, position, event) { console.log('end', draggingNode, endNode, position, event) // 新的空节点 let newData = { id: (+new Date), children: [] }; //在左tree插入拖拽的节点 this.$refs.treeIn.insertBefore(newData, draggingNode); //右tree触发结束拖拽事件 this.$refs.treeOut.$emit('tree-node-drag-end', event); this.$nextTick(() => { // 如果是移动到了自身--- console.log(this.$refs.treeIn.getNode(draggingNode.data)) if (this.$refs.treeIn.getNode(draggingNode.data)) { this.$refs.treeIn.remove(newData); console.log('移动到自身') } else { // 如果移动到了右tree上---- let data = JSON.parse(JSON.stringify(draggingNode.data)); this.$refs.treeIn.insertAfter(data, this.$refs.treeIn.getNode(newData)); this.$refs.treeIn.remove(newData); console.log('移动到别的tree') } }) }, handleOutDragEnd(draggingNode, endNode, position, event) { // console.log('endOut', draggingNode, endNode, position, event) }, handleDragOver({event}) { // 阻止默认事件，允许放置 event.preventDefault(); }, handleDragLeave({event}) { // 清除放置效果 event.preventDefault(); }, //结束拖拽，可得到拖拽来源与去向 handleDrop(draggingNode, dropNode, dropType, ev) { // const dragNodeData = this.dragNode.data; // event.preventDefault(); console.log('移动结束', draggingNode, dropNode, dropType); }, returnTrue() { return true; }, returnFalse() { return false; } } } 页面显示图  想做成的页面显示图，只想知道二级-2222拖动到了二级-4444 并重新赋值