avue-tree树形结构，el-tree如何实现点右键出菜单

开发一个项目需要使用avue,于是使用了avue-tree，但是后面想要编辑选中树形中对应的值的时候发现不知道应该给什么值，查了好多资料，也没有查到给的值应该是什么格式，于是果断使用el-tree,换成el-tree后，编辑给值就好给多了，直接给对应的id,放在数组中就ok了。

如果大家有解决了的话欢迎评论告诉我，谢谢！！此篇参考某位兄弟的写法~

分享下我使用的el-tree的写法，以及右键出菜单的样式代码

<!-- 修改为el-tree,因为avue-tree编辑时候不好给选中的值 -->
                                    <el-tree :loading="treeLoading" ref="elTree" :data="dictData" :highlight-current="true" :default-expanded-keys="[diryectoryID]"
                                     @node-click="nodeClick" node-key="value" @node-contextmenu="rightClick">
                                    </el-tree>
                                    <div id="menu" v-show="showRightMenu" @mouseleave="showRightMenu=!showRightMenu">
                                        <el-card class="box-card">
                                            <div class="text item">
                                                <el-link icon="el-icon-circle-plus-outline" :underline="false" @click="addSecondDeryectory">新增下级目录</el-link>
                                            </div>
                                        </el-card>
                                    </div>

.text {
        font-size: 14px;
    }

    .item {
        margin-left: 10px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 150px;
        height: 40px;
    }
右键的操作重点

    rightClick(MouseEvent, object, Node, element) {
                console.log(MouseEvent, object, Node, element);
                this.currentNodeValue = object.value
                this.showRightMenu = 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;';
            }