<template>
<el-tree draggable :allow-drop="dropAllow" @node-drop="dragSuccess" ref="tree" :data="dataList"
:props="defaultProps" default-expand-all node-key="id" highlight-current></el-tree>
</template>
<script>
export default {
data() {
return {
dataList: [{
id: 1,
label: "一级菜单",
children: [{
id: 5,
label: "1-1",
}, ],
},
{
id: 2,
label: "二级菜单",
children: [{
id: 6,
label: "2-1",
},
{
id: 7,
label: "2-2",
},
],
},
{
id: 3,
label: "三级菜单",
children: [{
id: 8,
label: "3-1",
},
{
id: 9,
label: "3-2",
},
],
},
{
id: 4,
label: "四级菜单",
},
],
defaultProps: {
label: "label", //指定节点标签为节点对象的某个属性值
children: "children", //指定子树为节点对象的某个属性值
},
};
},
methods: {
dropAllow(draggingNode, dropNode, type) {
if (draggingNode.level === dropNode.level) { //同级
if (draggingNode.parent.id === dropNode.parent.id) {
// 向上拖拽 || 向下拖拽
return type === "prev" || type === "next"
}
} else { //不同级
if (draggingNode.level != 1) { //不是第一级
return type === "inner" //插入
} else {
return false;
}
}
},
dragSuccess(draggingNode, dropNode, type, event) {
console.log(draggingNode, dropNode, type, event);
},
}
};
</script>
vue2+element UI 树形只有两级, 第一级只能上下移动,第二级不能成为第一级,只能拖到别的第一级和在同一级排序
最新推荐文章于 2024-01-08 11:29:58 发布