vue elementui tree 任意级别拖拽功能
我的是根据父级id做的一些判断<el-treedraggable :allow-drop="allowDrop" @node-drop="sort"accordion style="font-size:14px;width:250px;"ref="tree" :data="catalogList" :props="def...
·
我的是根据父级id做的一些判断
<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)
}
})
}
更多推荐
已为社区贡献31条内容
所有评论(0)