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:'图层树'
? ? ? ? },
? ? ? ]
? ? }
? },

三、效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于Vue+Element ui实现树形控件右键菜单的详细内容...