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

从Avue到El-tree

最新推荐文章于 2025-05-19 18:10:41 发布

原创最新推荐文章于 2025-05-19 18:10:41 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

在尝试使用avue-tree进行项目开发时遇到编辑选中值的难题，最终选择el-tree并实现了通过id来编辑选中项的功能。本文分享了el-tree的使用方法及右键菜单的实现。

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

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

分享下我使用的el-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;';
           }