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

 更新时间:2024年03月20日 16:26:30   投稿:mrr  
这篇文章主要介绍了vue+elementUI实现右击指定表格列的单元格显示选择框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

一、template代码如下:

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

<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、右键时弹出的选择框代码

<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代码如下:

// 铁心级号选择时
		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
		},

到此这篇关于vue+elementUI实现右击指定表格列的单元格显示选择框的文章就介绍到这了,更多相关vue elementUI选择框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue使用html2canvas和jspdf将html转成pdf

    vue使用html2canvas和jspdf将html转成pdf

    在前端开发中, html转pdf是最常见的需求,下面这篇文章主要给大家介绍了关于vue如何使用html2canvas和jspdf将html转成pdf的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 解决vue一个页面中复用同一个echarts组件的问题

    解决vue一个页面中复用同一个echarts组件的问题

    这篇文章主要介绍了解决vue一个页面中复用同一个echarts组件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • IDEA创建Vue项目的两种方式总结

    IDEA创建Vue项目的两种方式总结

    这篇文章主要介绍了IDEA创建Vue项目的两种方式总结,具有很好的参考价值,希望对大家有所帮助。
    2023-04-04
  • vue同一个浏览器登录不同账号数据覆盖问题解决方案

    vue同一个浏览器登录不同账号数据覆盖问题解决方案

    同一个浏览器登录不同账号session一致,这就导致后面登录的用户数据会把前面登录的用户数据覆盖掉,这个问题很常见,当前我这边解决的就是同一个浏览器不同窗口只能登录一个用户,对vue同一个浏览器登录不同账号数据覆盖问题解决方法感兴趣的朋友一起看看吧
    2024-01-01
  • 解决vue3 defineProps 引入定义的接口报错

    解决vue3 defineProps 引入定义的接口报错

    这篇文章主要为大家介绍了解决vue3 defineProps 引入定义的接口报错详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • el-menu如何根据多层树形结构递归遍历展示菜单栏

    el-menu如何根据多层树形结构递归遍历展示菜单栏

    这篇文章主要介绍了el-menu根据多层树形结构递归遍历展示菜单栏,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • vue中动态渲染数据时使用$refs无效的解决

    vue中动态渲染数据时使用$refs无效的解决

    这篇文章主要介绍了vue中动态渲染数据时使用$refs无效的解决方案,具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue微信分享到朋友圈 vue微信发送给好友

    vue微信分享到朋友圈 vue微信发送给好友

    这篇文章主要为大家详细介绍了vue微信分享到朋友圈,vue微信发送给好友功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Vue实现根据hash高亮选项卡

    Vue实现根据hash高亮选项卡

    这篇文章主要为大家详细介绍了Vue实现根据hash高亮选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue3中嵌套路由和编程式路由的实现

    Vue3中嵌套路由和编程式路由的实现

    Vue Router在Vue.js的核心库上提供了路由的功能,使得我们可以在单页应用中实现页面的切换、跳转和参数传递等功能,本文主要介绍了Vue3中嵌套路由和编程式路由的实现,感兴趣的可以了解一下
    2023-12-12

最新评论