当前位置: 首页 > news >正文

el-table左键双击单元格编辑内容(输入框输入计算公式可直接得出结果),右键单击展示操作菜单,可编辑单元格高亮展示

vue2点击左侧的树节点(el-tree)定位到对应右侧树形表格(el-table)的位置,树形表格懒加载

表格代码

    <el-table ref="singleTable" :data="detailsList" highlight-current-row="" row-key="detailId" @row-click="clickTableRow" //左键单击@row-contextmenu="rightClick" //右键单击@cell-dblclick="doubleClick" //双击单元格:cell-style="columnbackgroundStyle" //高亮可编辑单元格><el-table-column type="index" width="80" label="序号" align="center" fixed=""> </el-table-column><el-table-column property="code" label="编码" width="160" fixed=""></el-table-column><el-table-column property="name" label="名称" width="120" align="center" :key="index"><template slot-scope="scope"><span><el-input v-if="scope.row[scope.column.property + 'Show']" clearable="" v-model="scope.row.name" @keyup.enter.native="onBlur(scope.row, scope.column)" @blur="onBlur(scope.row, scope.column)"></el-input><span v-else="">{{ scope.row.name }}</span></span></template></el-table-column></el-table>

操作菜单代码

<div id="menu" class="menu"><ul class="ul1 list-paddingleft-2"><li class="li1" ref="menu1" @mouseover="showChild" @mouseout="hideChild"><span>新增下级</span><i class="el-icon-arrow-right" :style="cssStyle.iconfont"></i><ul ref="childMenu1" class="ul2 list-paddingleft-2"><li class="li2" @click="chooseList()"><span>选择下级</span></li><li class="li2" @click="addList()"><span>补充下级</span></li></ul></li><li class="li1" @click="delMenu()"><span>删除</span></li></ul>
</div>

js代码

// 左键单击事件
clickTableRow(row, column, event) {var menu = document.querySelector("#menu");menu.style.display = "none";
},// 右键单击
rightClick(row, column, event) {this.currentRow = row //存储当前选中的行var menu = document.querySelector("#menu"); //展示操作菜单event.preventDefault();// 页面只读的时候不展示if (this.isRead) {menu.style.display = "none";return}// 根据事件对象中鼠标点击的位置,进行定位menu.style.left = event.clientX + "px";menu.style.top = event.clientY + "px";// 改变自定义菜单的隐藏与显示menu.style.display = "block";this.setCurrent(row);
},
setCurrent(row) {this.$refs.singleTable.setCurrentRow(row);
},
// 展示菜单子级
showChild() {this.$refs.menu1.style.backgroundColor = '#ecf5ff'this.$refs.childMenu1.style.display = 'block'
},
// 隐藏菜单子级
hideChild() {this.$refs.menu1.style.backgroundColor = '#fff'this.$refs.childMenu1.style.display = 'none'
},
// 双击单元格
doubleClickTop(row, column) {// 页面只读时不触发if (this.isRead) {return}// 避免点击过快导致多个输入框处于焦点状态this.$set(row,column.property + 'Show',false)this.$set(row,column.property + 'Show',true)
},
// 输入框鼠标失焦或者键盘回车时触发
onBlur(row, column) {this.$set(row,column.property + 'Show',false)// 请求后台更改数据this.getDetailsList(row)
},
// 根据输入的公式计算出结果(引入main.js工具库)
calculate() {try {this.result = this.mathjs.evaluate(输入框绑定的值);} catch (error) {this.result = '无效的表达式';}
},
// 高亮可编辑单元格
columnbackgroundStyle({ row, column, rowIndex, columnIndex }){if (this.isRead) {return}var columnList=['name']if (columnList.indexOf(column.property)>-1) {return 'background:rgb(249 239 72 / 16%);'}
},

样式部分

.menu:{position: absolute;display: none;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);background: #ffffff;cursor: pointer;color: #606266;width: 200px;border: 1px solid #e4e7ed;font-size: 13px;z-index:999
}
.ul1:{list-style: none;margin: 0px;padding: 0px;
}
.li1:{padding: 0px 10px;height: 30px;line-height: 30px;position: relative;box-sizing: border-box;text-indent: 8px;
}
.ul2:{display: none;position: absolute;left: 200px;top: 0px;width: 200px;border: 1px solid #e4e7ed;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);background-color: #fff;
}
.li2:{background-color: #fff;
}

相关文章:

el-table左键双击单元格编辑内容(输入框输入计算公式可直接得出结果),右键单击展示操作菜单,可编辑单元格高亮展示

vue2点击左侧的树节点&#xff08;el-tree&#xff09;定位到对应右侧树形表格(el-table)的位置&#xff0c;树形表格懒加载 表格代码 <el-table ref"singleTable" :data"detailsList" highlight-current-row"" row-key"detailId"…...

实现HBase表和RDB表的转化(附Java源码资源)

实现HBase表和RDB表的转化 一、引入 转化为HBase表的三大来源&#xff1a;RDB Table、Client API、Files 如何构造通用性的代码模板实现向HBase表的转换&#xff0c;是一个值得考虑的问题。这篇文章着重讲解RDB表向HBase表的转换。 首先&#xff0c;我们需要分别构造rdb和hba…...

10:00面试,10:06就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…...

【Python】: Django Web开发实战(详细教程)

Python Django全面介绍 Django是一个非常强大的Python Web开发框架&#xff0c;它以"快速开发"和"干净、实用的设计"为设计宗旨。本文将从Django的基本概念开始&#xff0c;逐渐引导大家理解如何使用Django构建复杂的web应用程序。 Django基本概念与原理…...

突破编程_C++_C++11新特性(tuple)

1 std::tuple 简介 1.1 std::tuple 概述 std::tuple 是一个固定大小的不同类型值的集合&#xff0c;可以看作 std::pair 的泛化&#xff0c;即 std::pair 是 std::tuple 的一个特例&#xff0c;其长度受限为 2。与 C# 中的 tuple 类似&#xff0c;但 std::tuple 的功能更为强…...

xss.pwnfunction(DOM型XSS)靶场

环境进入该网站 Challenges (pwnfunction.com) 第一关&#xff1a;Ma Spaghet! 源码&#xff1a; <!-- Challenge --> <h2 id"spaghet"></h2> <script>spaghet.innerHTML (new URL(location).searchParams.get(somebody) || "Somebo…...

安装 docker 和 jenkins

安装 docker #安装 软件包 docker yum install -y yum-utils device-mapper-persistent-data lvm2#设置 yum 源 yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-c…...

jni入门学习 CMakeLists脚本

在 Android Studio 中使用 CMake 可以编译 C/C 代码&#xff0c;这为开发者提供了在 Android 应用中嵌入本地代码的能力。下面是关于在 Android Studio 中使用 CMake 编译的详细说明&#xff1a; 1. 创建 CMakeLists.txt 文件&#xff1a; 首先&#xff0c;你需要在项目的根目…...

如何在没有向量数据库的情况下使用知识图谱实现RAG

引言 传统上&#xff0c;为大型语言模型&#xff08;LLMs&#xff09;提供长期记忆通常涉及到使用检索增强生成&#xff08;RAG&#xff09;解决方案&#xff0c;其中向量数据库作为长期记忆的存储机制。然而&#xff0c;我们是否能在没有向量数据库的情况下达到相同效果呢&am…...

6.如何判断数据库搜索是否走索引?

判断是否使用索引搜索 索引在数据库中是一个不可或缺的存在&#xff0c;想让你的查询结果快准狠&#xff0c;还是需要索引的来帮忙&#xff0c;那么在mongo中如何判断搜索是不是走索引呢&#xff1f;通常使用执行计划&#xff08;解释计划、Explain Plan&#xff09;来查看查询…...

Java并发编程的性能优化方案中,哪些方法比较常用

在Java并发编程的性能优化方案中&#xff0c;以下是一些常用的方法&#xff1a; 线程池的使用&#xff1a; 线程池可以复用线程&#xff0c;避免频繁地创建和销毁线程&#xff0c;从而提高系统性能。常用的线程池有FixedThreadPool、CachedThreadPool等。根据任务特性选择合适…...

AcWing 2867. 回文日期(每日一题)

原题链接&#xff1a;2867. 回文日期 - AcWing题库 2020 年春节期间&#xff0c;有一个特殊的日期引起了大家的注意&#xff1a;2020 年 2 月 2 日。 因为如果将这个日期按 “yyyymmdd” 的格式写成一个 8 位数是 20200202&#xff0c;恰好是一个回文数。 我们称这样的日期是…...

学习笔记-华为IPD转型2020:3,IPD的实施

3. IPD的实施 1999 年开始的 IPD 转型是计划中的多个转型项目中的第一个&#xff08;Liu&#xff0c;2015&#xff09;。华为为此次转型成立了一个专门的团队&#xff0c;从大约20人开始&#xff0c;他们是华为第一产业的高层领导。董事会主席孙雅芳是这个团队的负责人。该团…...

2024腾龙杯web签到题-初识jwt(签到:这是一个登录页面)

什么是 jwt? 它是 JSON Web Token 的缩写&#xff0c;是一个开放标准&#xff0c;定义了一种紧凑的、自包含的方式&#xff0c;用于作为JSON对象在各方之间安全地传输信息&#xff0c;该信息可以被验证和信任&#xff0c;因为它是数字签名的。它就是一种认证机制&#xff0c;…...

Monaco Editor系列(一)启动项目与入门示例解析

前言&#xff1a;作为一名程序员&#xff0c;我们工作中的每一天都在与代码编辑器打交道&#xff0c;相信各位前端程序员对 VS Code 一定都不陌生&#xff0c;VS Code 可以为我们提供代码高亮、代码对比等等功能&#xff0c;让我们在开发的时候&#xff0c;不需要对着暗淡无光的…...

DNA存储技术原理是什么?

随着大数据和人工智能的发展&#xff0c;全球每天产生的数据量剧增&#xff0c;对存储设备的需求也随之增长&#xff0c;数据存储问题日益凸显。传统的硬盘驱动器&#xff08;HDD&#xff09;、磁带等冷存和深度归档存储占据数据中心存储的60-70%&#xff0c;由于它们的访问频率…...

多维时序 | Matlab实现VMD-CNN-GRU变分模态分解结合卷积神经网络门控循环单元多变量时间序列预测

多维时序 | Matlab实现VMD-CNN-GRU变分模态分解结合卷积神经网络门控循环单元多变量时间序列预测 目录 多维时序 | Matlab实现VMD-CNN-GRU变分模态分解结合卷积神经网络门控循环单元多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现VMD-CN…...

基于springboot+vue的毕业论文管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…...

JavaWeb后端——分层解耦 IOC DI

分层/三层架构概述 三层架构&#xff1a;Controller、Service、Dao 解耦/IOC&DI概述 分层解耦 容器称为&#xff1a;IOC容器/Spring容器 IOC 容器中创建&#xff0c;管理的对象&#xff0c;称为&#xff1a;bean 对象 IOC&DI入门 实现 IOC&DI 需要的注解&#…...

短视频矩阵系统技术交付

短视频矩阵系统技术交付&#xff0c;短视频矩阵剪辑矩阵分发系统现在在来开发这个市场单个项目来说&#xff0c;目前基本上已经沉淀3年了&#xff0c;那么我们来就技术短视频矩阵剪辑系统开发来聊聊 短视频矩阵系统经过315大会以后&#xff0c;很多违规的技术开发肯定有筛选到了…...

Sunshine游戏串流终极指南:从零开始搭建自托管游戏主机

Sunshine游戏串流终极指南&#xff1a;从零开始搭建自托管游戏主机 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在任何设备上流畅玩PC游戏&#xff0c;但厌倦了云游戏服务的…...

书匠策AI:期刊论文的“智能魔法棒”,解锁学术新境界

在学术的浩瀚宇宙中&#xff0c;每一位研究者都是探索未知的星辰&#xff0c;而期刊论文则是他们闪耀光芒的舞台。然而&#xff0c;撰写一篇高质量的期刊论文&#xff0c;往往需要经历选题迷茫、文献浩瀚、框架构建、内容雕琢等多重考验。幸运的是&#xff0c;随着人工智能技术…...

深入K8s网络:当Nginx遇到CoreDNS,一次搞懂Service发现与Headless Service的实战选择

深入K8s网络&#xff1a;当Nginx遇到CoreDNS&#xff0c;一次搞懂Service发现与Headless Service的实战选择 在Kubernetes集群中&#xff0c;服务发现机制如同城市的地下管网——虽然看不见&#xff0c;却决定了整个系统的连通性。当Nginx作为入口网关需要动态解析后端服务&…...

别再死记硬背了!用Python快速搞定离散数学命题逻辑的真值表与范式

用Python自动化离散数学&#xff1a;真值表与范式的实战指南 离散数学中命题逻辑的真值表与范式计算&#xff0c;常常让计算机专业的学生陷入重复机械运算的泥潭。当命题变元超过3个时&#xff0c;手工计算不仅耗时耗力&#xff0c;还容易出错。其实&#xff0c;这正是编程大显…...

网盘直链下载助手:8大主流网盘全速下载的终极解决方案

网盘直链下载助手&#xff1a;8大主流网盘全速下载的终极解决方案 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼…...

用C语言手把手教你写一个Linux虚拟键盘驱动(基于uinput模块)

用C语言手把手教你写一个Linux虚拟键盘驱动&#xff08;基于uinput模块&#xff09; 在嵌入式开发和系统编程领域&#xff0c;模拟用户输入是一个常见需求。想象一下这样的场景&#xff1a;你正在开发一台没有物理键盘的工业控制设备&#xff0c;或者需要为自动化测试创建可靠的…...

别再死记硬背BRDF公式了!用微表面模型和菲涅尔项,手把手教你写一个真实的PBR材质

从微表面到真实感&#xff1a;手把手实现PBR材质着色器 在图形学领域&#xff0c;物理真实感渲染(PBR)已经成为现代游戏和影视制作的标配技术。但很多开发者在学习PBR时&#xff0c;常常陷入复杂的数学公式推导而难以落地实践。本文将彻底改变这一现状——我们将直接从GAMES-10…...

手把手教你将HFSS/CST设计的天线导入Matlab sensorArrayAnalyzer做整阵分析

跨平台天线阵列分析实战&#xff1a;从HFSS/CST到Matlab sensorArrayAnalyzer 在电磁仿真领域&#xff0c;专业工程师常常面临一个关键挑战&#xff1a;如何在单一天线单元设计与完整阵列系统分析之间搭建无缝桥梁。ANSYS HFSS和CST Studio Suite作为行业标准工具&#xff0c;能…...

Flowframes:如何用AI智能插帧技术重塑视频流畅度体验?

Flowframes&#xff1a;如何用AI智能插帧技术重塑视频流畅度体验&#xff1f; 【免费下载链接】flowframes Flowframes Windows GUI for video interpolation using DAIN (NCNN) or RIFE (CUDA/NCNN) 项目地址: https://gitcode.com/gh_mirrors/fl/flowframes 你是否曾为…...

终极指南:使用LeetDown为iPhone和iPad进行快速降级恢复

终极指南&#xff1a;使用LeetDown为iPhone和iPad进行快速降级恢复 【免费下载链接】LeetDown a GUI macOS Downgrade Tool for A6 and A7 iDevices 项目地址: https://gitcode.com/gh_mirrors/le/LeetDown 你是否拥有一台运行缓慢的iPhone 5s或iPad 4&#xff1f;苹果的…...