element 表格组件实现右键菜单

Coder_Yw

已于 2023-08-19 14:42:40 修改

阅读量936

点赞数

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

于 2023-08-17 20:35:46 首次发布

本文链接：https://blog.csdn.net/coder_yw/article/details/132349476

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在 elment 表格组件上实现右键菜单功能

demo 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>右键菜单</title>
	</head>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style>
		.menuDiv {
			display: none;
			position: absolute;

		}

		.menuUl {
			height: auto;
			width: auto;
			font-size: 14px;
			text-align: left;
			border-radius: 4px;
			border: none;
			background-color: #ffffff;
			color: #606266;
			list-style: none;
			border: 1px solid #ebeef5;
			padding: 5px;

		}

		.menuUl li {
			height: 35px;
			line-height: 35px;
			padding: 0 10px;
			cursor: pointer;
			border-bottom: 1px solid rgba(255, 255, 255, 0.47);
		}

		.menuUl li:hover {
			display: block;
			background-color: #ecf5ff;
			color: #7abbff;
		}
	</style>
	<body>
		<div id="app">
			<el-table highlight-current-row :data="tableData" @row-click="clickRow" @row-contextmenu="right"
				style="width: 100%">
				<el-table-column prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
			</el-table>


			<div id="menu" class="menuDiv">
				<ul class="menuUl">
					<li v-for="(item, index) in menus" :key="index" @click.stop="infoClick(item)">
						<i :class="item.icon"></i> {{ item.name }}
					</li>
				</ul>
			</div>
		</div>



		<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
		<!-- import JavaScript -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {
						visible: false,
						tableData: [{
							date: '2016-05-02',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1518 弄'
						}, {
							date: '2016-05-04',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1517 弄'
						}],
						menus: [{
								name: "菜单一",
								operType: 1,
								icon: "el-icon-upload2"
							},
							{
								name: "菜单二",
								operType: 2,
								icon: "el-icon-download"
							},
						],
					}
				},
				methods: {
					right(row, column, event) {
						console.log(row);
						console.log(column);
						console.log(event);
						event.preventDefault();
						let menu = document.querySelector("#menu");
						// 根据事件对象中鼠标点击的位置，进行定位
						menu.style.left = event.clientX + "px";
						menu.style.top = event.clientY + "px";
						// 改变自定义菜单的隐藏与显示
						menu.style.display = "block";
						menu.style.zIndex = 1000;

					},
					clickRow(row, column, event) {
						let menu = document.querySelector("#menu");
						menu.style.display = "none";
					},
					// 右击自定义菜单的点击事件
					infoClick(item) {
						console.log(item); 
						// 要做的事情

						let menu = document.querySelector("#menu");
						menu.style.display = "none";
					},
				}
			})
		</script>
	</body>
</html>