element-ui中右击显示下拉菜单

最新推荐文章于 2025-06-13 12:32:42 发布

学习的叶子

最新推荐文章于 2025-06-13 12:32:42 发布

阅读量7.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： element-ui 右击下拉

本文链接：https://blog.youkuaiyun.com/weixin_41991501/article/details/82844151

element-ui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Element UI框架中使用el-row, el-col, 和 el-dropdown组件创建响应式右键点击菜单，并展示了如何通过Vue.js的方法实现下拉菜单的显示与事件处理。

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

1.<el-row>
	<el-col v-for="item in data" @contextmenu.prevent.native="rightClick(item)">
		 <el-dropdown trigger="click" :ref="`work_flow_${item.name}`">
			 <----展示的内容--->
			 <el-dropdown-menu slot="dropdown">
				 <el-dropdoen-item @click.native="edit" >/el-dropdoen-item>
				<el-dropdoen-item @click.native="add" ></el-dropdoen-item>
			</el-dropdown-menu >
		</el-dropdown>
	</el-col>
</el-row>
methods:{
	rightClick(item) {
		const name = `work_flow_${item.name}`;
		this.$refs[name][0].show();     // 这步最关键，让下拉菜单显示
	}
}