vue+elementUI实现右击指定表格列的单元格显示选择框

一、template代码如下:

1、表格单元格中添加的代码:

html 复制代码
<div v-if="item.label === '铁心级号'" @contextmenu.prevent="openRightMenu($event, item, scope.$index)" style="height: 38px; line-height: 38px;">
								<span style="display: inline-block; width: 100%; height: 100%;">{{scope.row[item.prop] }}</span>
							</div>

2、右键时弹出的选择框代码

html 复制代码
<div class="u-contextmenu" v-show="rightClickObj.visible" :style="{ left: rightClickObj.left + 'px', top: rightClickObj.top + 'px'}">
			<p>选择铁心级号<i class="el-icon-close" style="float: right; cursor: pointer;" @click="rightClickObj.visible = false"></i></p>
			<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
			<el-checkbox-group v-model="checkList" @change="handleCheckedChange">
				<el-checkbox  v-for="(item, index) in coreLevelNumArr" :key="index" :label="item" ></el-checkbox>
			</el-checkbox-group>
			<div style="float: right;">
				<!-- <el-button type="primary" @click="showLevel">显示</el-button> -->
				<el-button type="primary" @click="hideLevel">隐藏</el-button>
			</div>
		</div>

js代码如下:

javascript 复制代码
// 铁心级号选择时
		handleCheckedChange: function (val) {
			let checkedCount = val.length;
			this.checkAll = checkedCount === this.coreLevelNumArr.length; //全选是否勾选上
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.coreLevelNumArr.length;
		},
		// 铁心级号全选触发的事件
		handleCheckAllChange: function (val) {
			this.checkList = val ? this.coreLevelNumArr : []; // 全选和全不选的赋值
			this.isIndeterminate = false;
		},
		showLevel:function(){
			this.rightClickObj.visible = false;
			this.hideLevelList = this.coreLevelNumArr.filter(x => this.checkList.every(y => y !== x));
		},
		// 隐藏选中级号的行
		hideLevel:function(){
			this.rightClickObj.visible = false;
			this.hideLevelList = this.checkList;
			// 更改表格中的数据
			this.updateTableData.forEach((item) => {
				if(this.hideLevelList.indexOf(item.level_no) > -1){//判断当前行的级号是否在隐藏的级号数组中
					item.isShow = false;
				}else{
					item.isShow = true;
				}
			});
			console.log(this.updateTableData);
		},
		//每一行的回调样式方法
		rowClassName: function ({ row }) {
			if(this.hideLevelList.indexOf(row.level_no) > -1){ 
				return "hideRow"; //如果当前行的级号在隐藏级号数组中将返回隐藏类名
			}else{
				return "";
			}
		},
		/**
		 * 右键铁心级号显示选择菜单
		 * @param {Number} index 表格行下标
		 */
		openRightMenu(event,item,index){
			this.rightClickObj.left = 51;
			this.rightClickObj.top = 870 + (index+1)*40;
			this.rightClickObj.visible = true
		},
相关推荐
qq. 28040339841 分钟前
react hooks
前端·javascript·react.js
LHX sir1 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web
Gazer_S1 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
小光学长1 小时前
基于Vue的图书馆座位预约系统6emrqhc8(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Y学院1 小时前
vue的组件通信
前端·javascript·vue.js
PairsNightRain1 小时前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
小岛前端2 小时前
React 剧变!
前端·react.js·前端框架
teeeeeeemo2 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
Greg_Zhong2 小时前
vue项目安装使用,npm、webpack版本问题注意
vue.js·npm版本、webpack版本
岁月宁静2 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能