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},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/755715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海康威视添加新摄像头到原建的网络监控平台中

一、适用场景 1、企业已经存在一套海康威视的监控网络系统&#xff1b; 2、根据业务的需求&#xff0c;要新增加一些摄像头&#xff1b; 3、原施工方忙碌&#xff0c;为新增加的摄像头施工成本较高&#xff1b; 4、新增加海康威视的摄像头视频监控&#xff0c;保存在原建的监控…

构建强大的API:Django中的REST框架探究与实践【第146篇—Django】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 构建强大的API&#xff1a;Django中的REST框架探究与实践 在当今的Web开发中&#xff0c;构…

低代码:软件开发的性价比之王

随着技术的飞速发展&#xff0c;软件开发领域正经历着前所未有的变革。在这场变革中&#xff0c;低代码平台凭借其高效、便捷的特性&#xff0c;逐渐崭露头角&#xff0c;成为众多企业和开发者的首选。本文将探讨低代码平台为何能被誉为“性价比之王”&#xff0c;并分析其在软…

Apache SeaTunnel MongoDB CDC 使用指南

随着数据驱动决策的重要性日益凸显&#xff0c;实时数据处理成为企业竞争力的关键。SeaTunnel MongoDB CDC(Change Data Capture) 源连接器的推出&#xff0c;为开发者提供了一个高效、灵活的工具&#xff0c;以实现对 MongoDB 数据库变更的实时捕获和处理。 本文将深入探讨该连…

Jackson 2.x 系列【1】概述

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 前言2. 什么是 JSON3. 常用 Java JSON 库4. Jackson4.1 简介4.2 套件4.3 模块4.…

prompt开发生命周期

1.定义任务场景和成功标准 任务场景可分为简单任务&#xff1a;实体抽取、qa等 复杂任务&#xff1a;代码生成、创意写作等 在定义任务后&#xff0c;就要定义模型实现该任务的成功标准&#xff1a; 模型表现和准确率&#xff1b;延迟&#xff1b;价格。 2.开发测试用例 多…

我手写的轮子开源了

我手写的轮子开源了 文章目录 1.gitee坐标和地址1.1.gitee坐标1.2.gitee地址 2.github坐标和地址2.1.github坐标2.2.github地址 3.总结 1.gitee坐标和地址 1.1.gitee坐标 <dependency><groupId>io.gitee.bigbigfeifei</groupId><artifactId>es-sprin…

URI 是什么

URI&#xff08;Uniform Resource Identifier&#xff09;&#xff0c;统一资源标识符&#xff0c;是用来唯一标识某一互联网资源的字符串。URI 通常包括 URL&#xff08;统一资源定位符&#xff09;和 URN&#xff08;统一资源名称&#xff09;两种形式。 在计算机科学中&…

Vue2(七):超详细vue开发环境搭建(win7),nodejs下载与安装,安装淘宝镜像(报错已解决),配置脚手架

一、安装node.js 本来想粗略写一下的&#xff0c;但是搭建脚手架的时候&#xff0c;遇到了很多问题&#xff0c;浪费快两天时间&#xff0c;记录一下自己的解决办法希望对你们有帮助&#xff01; 1.下载nodejs 安装包下载链接【CNPM Binaries Mirror】 下载我划线的这个&am…

P8717 [蓝桥杯 2020 省 AB2] 成绩分析 Python

[蓝桥杯 2020 省 AB2] 成绩分析 题目描述 小蓝给学生们组织了一场考试&#xff0c;卷面总分为 100 100 100 分&#xff0c;每个学生的得分都是一个 0 0 0 到 100 100 100 的整数。 请计算这次考试的最高分、最低分和平均分。 输入格式 输入的第一行包含一个整数 n n n…

代码随想录算法训练营第25天| 216.组合总和III、17.电话号码的字母组合

216.组合总和III 题目链接&#xff1a;组合总和III 题目描述&#xff1a;找出所有相加之和为 n **的 k ****个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c…

2024热门外贸独立站wordpress模板

工艺品wordpress外贸主题 简约大气的wordpress外贸主题&#xff0c;适合做工艺品进出品外贸的公司官网使用。 https://www.jianzhanpress.com/?p5377 日用百货wordpress外贸主题 蓝色大气的wordpress外贸主题&#xff0c;适合做日用百货的外贸公司搭建跨境电商网站使用。 …

Qt教程 — 3.3 深入了解Qt 控件:Input Widgets部件(2)

目录 1 Input Widgets简介 2 如何使用Input Widgets部件 2.1 QSpinBox组件-窗口背景不透明调节器 2.2 DoubleSpinBox 组件-来调节程序窗口的整体大小 2.3 QTimeEdit、QDateEdit、QDateTimeEdit组件-编辑日期和时间的小部件 Input Widgets部件部件较多&#xff0c;将分为三…

centos上安装Docker

0.安装Docker Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道…

PlantUML Integration 编写短信服务类图

PlantUML Integration 写一个类图&#xff0c;主要功能为 1、编写一个serviceSms短信服务类&#xff1b; 2、需要用到短信的地方统一调用基建层的服务即可&#xff1b; 3、可以随意切换、增加短信厂商&#xff0c;不需要更改场景代码&#xff0c;只需要更改application.yml 里面…

如何在 Flutter 中实现地理定位和地图功能?

可以使用高德定位 高德地图实现 1 、申请成为高德地图开发者 2 、创建应用配置获取 Key 3 、安装依赖配置 amap_flutter_location 4、为了方便调试需要配置签名&#xff0c;配置签名文件 找到 android /app/build.gradle 配置签名文件 5 、需要配置权限&#xff0c;修改…

13个外贸业务员常用邮件模板-订单沟通

除了报价后跟进客户&#xff0c;我们在实际工作过程当中也会遇到很多非常规性的情况&#xff0c;需要和客户及时沟通处理。 以下是13个外贸业务员常用邮件模板-订单沟通&#xff1a;你可以根据自己的行业、公司、产品情况以及自身的经验判断进行调整和完善&#xff0c;做出一套…

水下蓝牙耳机哪个牌子好?业界公认四大高口碑游泳耳机

在这个活力四溢的时代&#xff0c;人们对于健康生活方式的追求愈发热切&#xff0c;游泳作为一项兼顾休闲与健身的运动&#xff0c;深受大众喜爱。在水下世界&#xff0c;音乐的陪伴能增添游泳的乐趣&#xff0c;一款好的水下蓝牙耳机成为游泳爱好者们的新宠。 近年来&#xff…

深入理解nginx连接数限制模块[上]

目录 1. 引言2. 启用连接数限制功能3. 配置指令介绍3.1. limit_conn_zone&#xff1a;3.2. limit_conn&#xff1a;3.3. limit_conn_log_level&#xff1a;3.4. limit_conn_status&#xff1a;3.4. limit_conn_dry_run&#xff1a; 1. 引言 nginx是一个高性能的开源Web服务器和…

DZY-212中间继电器 DC 220V 板后接线 面板安装 JOSEF约瑟

系列型号: DZY-200系列中间继电器&#xff1b;DZY-201中间继电器&#xff1b; DZY-202中间继电器&#xff1b;DZY-203中间继电器&#xff1b; DZY-204中间继电器&#xff1b;DZY-205中间继电器&#xff1b; DZY-206中间继电器&#xff1b;DZY-207中间继电器&#xff1b; DZY-20…