Vue+Element ui树形控件右键菜单

最新推荐文章于 2024-09-14 08:24:20 发布

Советский

最新推荐文章于 2024-09-14 08:24:20 发布

阅读量2.5k

点赞数 1

分类专栏： Web 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44956826/article/details/124119314

版权

本文介绍了如何在Vue项目中按需引入Element UI，并详细讲解了如何实现树形控件的右键菜单功能。通过示例代码展示了TEMPLATE、JS和STYLE的实现细节，并给出了最终的效果图。

摘要由CSDN通过智能技术生成

个人学习用

需求

实现树形控件右键菜单功能，有添加文件、删除文件、重命名功能

一、按需引入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">新建