<el-tree
ref="tree"
default-expand-all
highlight-current
:expand-on-click-node="false"
:data="tableData"
:props="{
label: 'detailName',
children: 'children'
}"
node-key="id"
draggable
:allow-drop="allowDrop"
>
<span class="custom-tree-node" slot-scope="{ node, data }">{{
node.label
}}</span>
</el-tree>
数据 Let teableData=[
{
"id": 1,
"detailName": "一级 1",
"parentId": 0,
"goodsGrade": 0,
"children": [
{
"id": 5,
"detailName": "一级 1-1",
"parentId": 1,
"goodsGrade": 1
}
]
},
{
"id": 2,
"detailName": "二级 ",
"parentId": 0,
"goodsGrade": 0,
"children": [
{
"id": 3,
"detailName": "二级 1-1",
"parentId": 2,
"goodsGrade": 1
},
{
"id": 4,
"detailName": "二级 2-1",
"parentId": 2,
"goodsGrade": 1
}
]
}
]
方法 allowDrop(draggingNode, dropNode, dropType) {
// draggingNode.data.goodsGrade === 0 是顶级节点，只允许上下拖拽
if (draggingNode.data.goodsGrade === 0) {
// 确认dropNode也是顶级节点
const isDropTopLevel =
dropNode.data.goodsGrade === 0 || dropNode.data.parentId === 0
// 顶级节点只能上下拖动
if (isDropTopLevel) {
// 只有在dropType为'prev'或'next'时才允许拖放
return dropType === 'prev' || dropType === 'next'
} else {
// dropNode不是顶级节点，不允许拖放
return false
}
} else {
// 非顶级节点可以升级成为顶级节点
if (dropType !== 'inner') {
// 如果拖放到顶级节点旁边，非顶级节点升级为顶级节点
const isDropTopLevel =
dropNode.data.goodsGrade === 0 || dropNode.data.parentId === 0
if (isDropTopLevel) {
draggingNode.data.parentId = 0
return dropType === 'prev' || dropType === 'next'
}
} else {
// 非顶级节点可以拖放到任意顶级节点的内部
const isDropTopLevel =
dropNode.data.goodsGrade === 0 || dropNode.data.parentId === 0
if (isDropTopLevel) {
draggingNode.data.parentId = dropNode.data.id
return dropType === 'inner'
}
}
}
return false
},
为什么 draggingNode.data.parentId = 0 和 draggingNode.data.parentId = dropNode.data.id
不生效 要如何修改呢
