<el-button
type="primary"
icon="el-icon-plus"
style="margin: 10px"
v-show="treeData.length == 0"
@click.enter="addParentLevelNode"
>新增</el-button >
<el-tree
:data="treeData"
node-key="id"
show-checkbox
default-expand-all
@node-click="handleLeftclick"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree">
<template #default="{ node }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
<i class="el-icon-more"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-show="firstLevel"
@click.enter="addSameLevelNode"
>新增同级</el-dropdown-item>
<el-dropdown-item
v-show="lastLevel"
@click.enter="addChildNode"
>新增下级</el-dropdown-item>
<el-dropdown-item @click.enter="editNode"
>编辑</el-dropdown-item>
<el-dropdown-item @click.enter="deleteNode"
>删除</el-dropdown-item >
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
</span>
</template>
</el-tree>
treeData: [
{
id: 1,
label: "1111",
isEdit: true,
},
],
isShow: false,
currentData: "",
currentNode: "",
menuVisible: false,
firstLevel: false,
lastLevel: false,
filterText: "",
maxexpandId: 4,
handleLeftclick(data, node) {
this.currentData = data;
this.currentNode = node;
if (node.level != 1) {
//如果是根节点则不显示新增同级
this.firstLevel = true;
} else {
this.firstLevel = false;
}
if (node.level != 3) {
//如果是最后一级则不显示新增下级
this.lastLevel = true;
} else {
this.lastLevel = false;
}
},
// 增加父节点事件
addParentLevelNode() {
let id = Math.ceil(Math.random() * 100);
this.$prompt("请输入父节点名称", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(({ value }) => {
let treeD = { id: id, label: value };
this.$refs.tree.append(treeD, this.currentNode.parent);
})
.catch(() => {});
},
// 增加同级节点事件
addSameLevelNode() {
let id = Math.ceil(Math.random() * 100);
this.$prompt("请输入子节点名称", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(({ value }) => {
let treeD = { id: id, label: value };
this.$refs.tree.append(treeD, this.currentNode.parent);
})
.catch(() => {});
},
// 增加子级节点事件
addChildNode() {
if (this.currentNode.level >= 3) {
this.$message.error("最多只支持三级!");
return false;
}
let id = Math.ceil(Math.random() * 100);
this.$prompt("请输入子节点名称", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
})
.then(({ value }) => {
let treeD = { id: id, label: value };
this.$refs.tree.append(treeD, this.currentNode);
})
.catch(() => {});
},
// 删除节点
deleteNode() {
this.$confirm(
"确定删除'${this.currentNode.label}'节点, 是否继续?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.$refs.tree.remove(this.currentNode);
})
.catch(() => {});
},
//编辑节点
editNode() {
if (this.currentData.isEdit) {
this.$prompt("请输入节点名称", "提示", {
confirmButtonText: "确定",
inputValue: this.currentNode.data.label,
cancelButtonText: "取消",
}).then(({ value }) => {
this.$set(this.currentData, "label", value);
});
}
},