本文实例为大家分享了Vue+Element ui实现树形控件右键菜单的具体代码，供大家参考，具体内容如下 需求 实现树形控件右键菜单功能，有添加文件、删除文件、重命名功能 一、按需引入
本文实例为大家分享了Vue+Element ui实现树形控件右键菜单的具体代码，供大家参考，具体内容如下
需求
实现树形控件右键菜单功能，有添加文件、删除文件、重命名功能
一、按需引入ELEMENTUI组件
按需引入ELEMENTUI组件
二、实现菜单功能
1.TEMPLATE
代码如下（示例）：
<!-- 树形组件 -->
<el-tree
:data="data"
@node-contextmenu="floderOption"
@node-click="handleNodeClick"
node-key="id"
>
<!-- -->
<span
class="custom-tree-node"
slot-scope="{ node, data}"
style="width:100%"
>
<i class="el-icon-folder" style="color:#DFBA49;margin-right:59x"></i>
<span style="font-size:15px">{{node.label}}</span>
</span>
</el-tree>
<!-- 右键菜单栏 -->
<div :style="{'z-index':999,'position':'fixed',left:optionCardX + 'px',
top: optionCardY + 'px',
width:'100px',
background:'white','box-shadow':'0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)'}"
v-show="optionCardShow"
id="option-button-group">
<el-button @click="append" class="option-card-button">新建</el-button>
<el-button @click="remove" class="option-card-button">删除</el-button>
<el-button @click="rename" class="option-card-button">重命名</el-button>
</div>
2.JS
代码如下（示例）：
// 右键菜单属性设置
floderOption(e,data,n,t){
this.optionCardShow = false
this.optionCardX =e.x
this.optionCardY = e.y - 110
this.optionData = data
this.node = n
this.tree = t
this.optionCardShow = true
},
// 点击框外区域 隐藏菜单
OptionCardClose(event) {
var currentCli = document.getElementById("option-button-group");
if (currentCli) {
if (!currentCli.contains(event.target)) { //点击到了id为option-button-group以外的区域，就隐藏菜单
this.optionCardShow = false;
}
}
},
// 创建
append() {
this.optionCardShow = false
this.$prompt('请输⼊⽂件名', '提⽰', { // 弹出框⽤于输⼊⽂件名
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^\S{1,10}$/,
inputErrorMessage: '命名不合法，请重新命名'
}).then(({
value
}) => {
if (this.node.level >= 3) {
this.$message.error("最多只⽀持三级！")
return false;
}
console.log(this.optionData.id);
const newChild = { // 新建⼀个⼦节点
id: id++,
label: value,
children: []
};
// TODO 测试修改
//测试，在树形控件下方显示创建后的内容
const newSet = {
id: id++,
name:value
}
console.log(this.optionData.children);
if (!this.optionData.children) { // 如果当前节点没有⼦节点，那就新建⼀个空的⼦节点数组，⽤来存放新建⼦⽂件夹
this.$set(this.optionData, 'children', []);
this.$set(this.testData2, 'children', []) //测试，在树形控件下方显示创建后的内容
}
this.optionData.children.push(newChild); // 插⼊
this.testData2.push(newSet)
//同时展开节点
if (!this.node.expanded) {
this.node.expanded = true
}
this.$message({
type: 'success',
message: '⽂件夹新建成功！'
});
}).catch(() => {
this.$message({
type: 'info',
message: '创建失败'
});
});
},
// 删除
remove() {
this.optionCardShow = false
this.$confirm('此操作将永久删除该⽂件夹, 是否继续?', '提⽰', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const parent = this.node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === this.data.id);
children.splice(index, 1);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 重命名
rename(){
console.log(this.node)
this.optionCardShow = false
this.$prompt('请输⼊⽂件名', '提⽰', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPlaceholder: this.node.data.label,
inputPattern: /^\S{1,10}$/,
inputErrorMessage: '⽂件名长度在1到10之间'
}).then(({
value
}) => {
this.node.data.label = value
this.$message({
type: 'success',
message: '⽂件夹已重命名！'
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消输⼊'
});
});
},
test(node) {
console.log(node.id);
this.clickNode = node.id
},
handleNodeClick(item, data) {
console.log('item: ',item,'data: ', data);
this.test(data)
}
3.STYLE
.folder-box {
height: 100%;
}
.option-card-button {
width: 100%;
margin-left: 0;
font-size: 10px;
border-radius: 0;
}
4.data()
data(){
return{
optionCardX:'',
optionCardY:'',
optionCardShow:false,
optionData:[],
clickNode:0,
node:null,
tree:null,
data:[{
id:1,
label:'图层树',
}],
testData:[
{
name:'影像'
},
{
name:'地形'
},
{
name:'模型'
},
{
name:'矢量'
},
],
testData2:[
{
id:0,
name:''
},
{
id:1,
name:'图层树'
},
]
}
},
三、效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。