极客观点
项目管理
HarmonyOS
<template>
<div>
<el-dialog title="编辑转换" :fullscreen="true" ref="dialog" :close-on-click-modal="false"
:close-on-press-escape="false" :visible.sync="mappingDialog">
<el-row>
<el-col :span="10">
<el-tree :data="treeData1" ref="treeIn" class="tree" node-key="id" default-expand-all draggable
:props="defaultProps" :allow-drag="returnTrue" :render-content="renderTreeNode"
@node-drag-start="handleDragstart" @node-drag-end="handleInDragend"></el-tree>
</el-col>
<el-col :span="4">
</el-col>
<el-col :span="10">
<el-tree :data="treeData2" ref="treeOut" class="tree" node-key="id" default-expand-all draggable
:props="defaultProps" :allow-drop="returnTrue" :render-content="renderTreeNode"
@node-drag-end="handleOutDragEnd"
@node-drag-over="handleDragOver"
@node-drag-leave="handleDragLeave"
@node-drop="handleDrop"></el-tree>
<!-- is-drop-inner -->
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()">取 消</el-button>
<el-button class="new_btn_class" type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
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 <span><i class="el-icon-document"></i> {data.label}</span>;
} else {
return <span><i class="el-icon-folder"></i> {data.label}</span>;
}
},
//左侧节点触发拖拽
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;
}
}
}
</script>页面显示图
想做成的页面显示图，只想知道二级-2222拖动到了二级-4444 并重新赋值
你找找这个vue2版本的 看看这个能不能适用https://sortablejs.github.io/Vue.Draggable/#/nested-example 这是他其中一个demo 有层级的