我的是根据父级id做的一些判断
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<el-tree
draggable :allow-drop="allowDrop" @node-drop="sort"
accordion style="font-size:14px;width:250px;"
ref="tree" :data="catalogList" :props="defaultProps" :expand-on-click-node="false"
node-key="id" :highlight-current="true" :load="loadNode"
lazy :render-content="renderContent" @node-click="handleNodeClick"
empty-text="暂无数据">
allowDrop(draggingNode, dropNode, type){
//注掉的是同级拖拽
/* if (draggingNode.data.level === dropNode.data.level) {
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
}
} else {
// 不同级进行处理
return false
} */
//任意级别拖拽
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
return type === 'prev' || type === 'next'
} else {
return type === 'prev' || type === 'next' || type === 'inner'
}
},
//拖拽完成之后要重新排序
/*
* draggingNode：被拖拽节点对应的 Node
* dropNode：结束拖拽时最后进入的节点
* type: 被拖拽节点的放置位置（before、after、inner）
* event
*/
sort(draggingNode,dropNode,type,event) {
console.log(draggingNode)
console.log(dropNode)
if (draggingNode.data.aboveId === dropNode.data.aboveId) {
let obj = {
aboveId:'',
arr:[]
}
obj.aboveId = dropNode.data.aboveId
for (let item of dropNode.parent.childNodes) {
obj.arr.push(item.data.id)
}
console.log(obj)
this.updateOrderMe(obj)
} else {
let obj = {
aboveId:'',
id:'',
newAboveId:''
}
obj.aboveId = draggingNode.data.aboveId
obj.id = draggingNode.data.id
obj.newAboveId = dropNode.data.id
this.randomDrag(obj)
}
},
randomDrag(obj) {
this.$http
.post(url, obj).then(res =>{
if (!res.data.success) {
this.$message.warning(res.data.msg)
}
})
},
updateOrderMe(obj) {
this.$http
.post(url, {
aboveId:obj.aboveId,
ids: obj.arr
}).then(res =>{
if (!res.data.success) {
this.$message.warning(res.data.msg)
}
})
}
|
补充知识：element-ui tree 实现同级拖拽
我就废话不多说了，大家还是直接看代码吧~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<template>
<div>
<el-tree
draggable
:allow-drop="allowDrop"
@node-drop="sort"
ref="tree"
:data="data2"
:props="defaultProps"
show-checkbox
default-expand-all
node-key="id"
highlight-current
></el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes">通过 node 获取</el-button>
<el-button @click="getCheckedKeys">通过 key 获取</el-button>
<el-button @click="setCheckedNodes">通过 node 设置</el-button>
<el-button @click="setCheckedKeys">通过 key 设置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
</div>
</template>
<script>
// import draggable from "vuedraggable";
// import Sortable from "sortablejs";
export default {
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: "二级 2-1"
},
{
id: 9,
label: "三级 1-1-1"
}
]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
mounted() {
const el = document.querySelectorAll(".el-tree")[0];
console.log(el);
},
data() {
return {
data2: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
prop: "4"
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
prop: "5"
},
{
id: 6,
label: "二级 2-2",
prop: "6"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
prop: "7"
},
{
id: 8,
label: "二级 3-2",
prop: "9"
}
]
},
{
id: 9,
label: "一级4"
}
],
defaultProps: {
children: "children",
label: "label"
},
allowDrop(draggingNode, dropNode, type) {
if (draggingNode.level === dropNode.level) {
if (draggingNode.parent.id === dropNode.parent.id) {
// 向上拖拽 || 向下拖拽
return type === "prev" || type === "next";
}
} else {
// 不同级进行处理
return false;
}
},
sort(draggingNode, dropNode, type, event) {
// console.log('排序')
// console.log("<><><>>><><<><><><><><><><>")
// 拖拽之后的重新组合的数组
// console.log(dropNode.parent); //dropNode.parent.childNodes =[]
let obj = {
aboveId: "",
arr: []
};
obj.aboveId = dropNode.data.aboveId;
for (let item of dropNode.parent.childNodes) {
obj.arr.push(item.data.id);
}
}
};
}
};
</script>
|
以上这篇vue elementui tree 任意级别拖拽功能代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_43173924/article/details/89638576