vue项目右键弹出菜单

最新推荐文章于 2025-04-14 15:37:16 发布

早起的小笨鸡

最新推荐文章于 2025-04-14 15:37:16 发布

阅读量2k

点赞数 1

分类专栏： vue js 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_47783830/article/details/125719234

版权

这篇博客总结了如何在Vue.js项目中为表格添加右键弹出菜单功能，支持增删改操作。通过定义菜单结构并结合JavaScript实现，功能实现简洁明了。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在最近工作中，有一个需求，需要做一个表格，并且对该表格右键弹出菜单支持增删改，这里做下总结，功能截图如下：
在这里插入图片描述
首先定义菜单结构

<!-- 菜单 -->
        <div class="menu-list" :style="{position:'fixed',top:top+'px',left:left+'px'}" v-if="visible">
            <div class="menu" v-for="(item,index) in menuList">
                <div v-if="item=='插入图片'||item=='更换图片'">
                    <el-upload class="upload-demo"
                               action=""
                               :accept="$pubTool.UPLOADIMGFORMAT"
                               :auto-upload="false"
                               :show-file-list="false"
                               :limit="1"
                               :on-exceed="(files) => { selectedFileMore(files, 'img', 'script_filePath', 0,0, 1, 'NONE', false); addImg(); }"
                               :on-change="(file) => { selectedFile(file, 'img', 'script_filePath', 0

最低0.47元/天解锁文章