el-tree鼠标右键自定义菜单

一时失言乱红尘 2021-09-23 14:02 686阅读 0赞

### el-tree鼠标右键自定义菜单 ###

*  代码
 *  代码

# 代码 #

<template>
        <div id="app">
            <div class="block">
                <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
                         @node-contextmenu="rightClick"
                >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span> {
       { node.label }}</span>
    
          </span>
                </el-tree>
            </div>
            <div v-show="menuVisible" @mouseleave="menuVisible=!menuVisible">
    
                <ul id="menu">
                    <li tabindex="-1" class="menu__item" id="menu-4994-1-0" @click="() => treeAdd(nodeData)">
                        <el-link icon="el-icon-circle-plus-outline" :underline="false">添加</el-link>
    
                    </li>
    
                    <li tabindex="-1" class="menu__item" id="menu-4994-1-2" @click="() =>treeRemove(nodeData)">
                        <el-link icon="el-icon-remove-outline" :underline="false">删除</el-link>
                    </li>
                </ul>
            </div>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    nodeData: {},
                    menuVisible: false,
                    data: [{
                        id: 1,
                        icon: "el-icon-delete",
                        label: '一级 1',
                        children: [{
                            id: 4,
                            label: '二级 1-1',
                            children: [{
                                id: 9,
                                icon: 'el-icon-info',
                                label: '三级 1-1-1'
                            }, {
                                id: 10,
                                label: '三级 1-1-2'
                            }]
                        }]
                    }, {
                        id: 2,
                        label: '一级 2',
                        children: [{
                            id: 5,
                            label: '二级 2-1'
                        }, {
                            id: 6,
                            label: '二级 2-2'
                        }]
                    }, {
                        id: 3,
                        label: '一级 3',
                        children: [{
                            id: 7,
                            label: '二级 3-1'
                        }, {
                            id: 8,
                            label: '二级 3-2'
                        }]
                    }]
                }
    
            },
    
            methods: {
                rightClick(MouseEvent, object, Node, element) {
                    this.nodeData = Node
                    debugger
                    this.menuVisible = true;
                    let menu = document.querySelector("#menu");
                    menu.style.cssText = "position: fixed; left: " + (MouseEvent.clientX - 10) + 'px' + "; top: " + (MouseEvent.clientY - 25) + 'px; z-index: 999; cursor:pointer;';
                },
                treeAdd() {
                    alert(this.nodeData)
                },
                treeRemove() {
                
                    this.menuVisible = true
                }
            }
    
    
        }
    </script>
    <style>
        .menu__item {
            width: 100%;
            display: block;
            line-height: 20px;
            text-align: center;
            margin-top: 10px;
            text-align: center;
    
        }
    
    </style>

# 代码 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/41d8bf2207824a6381f2d4d30be0cf34.png