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

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

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

相关文章

微信小程序Java后台获取手机号

小程序端&#xff1a; wx.request({url: registerphone, //自己的地址data: {openid: openid,encryptedData: encryptedData, //手机加密数据iv: iv, // 加密ivsession_key: session_key,// 加密key},method: "post",header: {"content-type": "appli…

Python基于大数据的豆瓣电影分析,豆瓣电影可视化系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

大模型应用开发-大模型token等基本概念及参数和内存的关系

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 大模型应用向开发路径及一点个人思考大模型应用开发实用开源项目汇总大模型问答项目…

芒果YOLOv8改进106:卷积Conv篇:DO-DConv卷积提高性能涨点,使用over-parameterized卷积层提高CNN性能

芒果YOLOv8改进106:卷积Conv篇:DO-DConv卷积提高性能涨点,使用over-parameterized卷积层提高CNN性能 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 该专栏完整目录链接: 芒果YOLOv8深度改进教程 文章目录 DO-DConv论文理论部分…

深度学习_20_卷积中的填充与步幅

如果图片本身比较小&#xff0c;卷积之后输出也会很小&#xff0c;那么可以在图片与卷积核相乘之前先填充一下&#xff0c;让输出为预期大小 一般填充后输入&#xff0c;输出相同 当图片比较大的时候&#xff0c;如果利用卷积核去得到我们想要的大小的话&#xff0c;得用到多层…

lab3090连接

淘宝安装包&#xff0c;镜像包放在了F盘&#xff0c;文件夹名为“torch” 远程连接服务器 服务器&#xff0c;192.168.7.194&#xff0c;端口1324&#xff0c;账号&#xff0c;llf&#xff0c;密码123456 进入容器&#xff1a; docker attach llf_pytorch 创建后端jupyte…

软考高级:信息系统战略规划方法概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

java中的集合(Collections)“线程安全”是什么?有哪些线程安全的集合工具

文章目录 前言一、什么是线程安全&#xff1f;二、线程不安全的示例三、解决集合线程不安全的方案1、synchronized关键字2、lock机制3、java.util.Collections工具4、commons-collections工具5、guava工具 总结 前言 在Java开发中&#xff0c;集合是最常用的API之一&#xff0…

ubuntu/Linux连接redis教程

在 Ubuntu 上连接 Redis 数据库&#xff0c;你可以使用 redis-cli 命令来进行连接。以下是在 Ubuntu 终端中连接到 Redis 的步骤&#xff1a; 打开终端&#xff08;Terminal&#xff09;。输入以下命令连接到 Redis 数据库&#xff1a;redis-cli -h -p -a <hostname>:…

基础---nginx 启动不了,跟 Apache2 服务冲突

文章目录 查看 nginx 服务状态nginx 启动后 访问页面 127.0.0.1停止 nginx 服务&#xff0c;访问不了页面停止/启动 Apache2 服务&#xff0c;启动 Apache2 页面访问显示正确nginx 莫名启动不了卸载 Apache2 服务器 启动 nginx &#xff0c;但是总是不能实现反向代理&#xff0…

提升数据分析效率,选择IBM SPSS Statistics专业统计分析软件

在当今信息爆炸的时代&#xff0c;数据已经成为决策的重要依据。对于研究人员、学者、企业管理者等群体来说&#xff0c;如何高效地进行数据分析并得出准确结论至关重要。而IBM SPSS Statistics作为一款专业统计分析软件&#xff0c;为用户提供了强大的工具和功能&#xff0c;助…

阿里云免费证书改为3个月,应对方法很简单

情商高点的说法是 Google 积极推进90天免费证书&#xff0c;各服务商积极响应。 情商低点的话&#xff0c;就是钱的问题。 现在基本各大服务商都在2024年停止签发1年期的免费SSL证书产品&#xff0c;有效期都缩短至3个月。 目前腾讯云倒还是一年期。 如果是一年期的话&#x…

速盾cdn:cdn节点缓存内容不一致怎么办?

在使用CDN服务时&#xff0c;有时候可能会遇到CDN节点缓存内容不一致的情况。这种情况会导致用户访问网站时获取到的内容不一致&#xff0c;给用户带来困惑和不良体验。那么当遇到这种情况时&#xff0c;我们应该如何解决呢&#xff1f; 首先&#xff0c;我们需要了解CDN是如何…

java maven聚合项目-子项目重写父项目的依赖版本无法生效

前言 项目的springboot版本2.6.13 项目主pom 引入了springboot的依赖配置 <dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><…

泽众云真机-机型支持ADB调试功能即将上线

最近云真机平台在线客服&#xff0c;收到很多咨询关于ADB调试功能&#xff0c;什么时候能更新&#xff1f;据小编所知&#xff0c;正在升级之中&#xff0c;有一块专门为了解决ADB调试功能提前准备&#xff0c;升级网络硬件设备&#xff0c;目前平台的功能已开发完成&#xff0…

#QT(一种朴素的计算器实现方法)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;这是全靠自己想法写的计算器&#xff0c;没有参考任何教程。 &#xff08;1&#xff09;这个计算器只要有运算符敲入就会进行一次运算&#xff0c;所以他没有先后之后&#xff0c;无法满足运算优先级。 &#xff08;2&#xff…

[Redis]——Redis持久化的两种方式RDB、AOF

目录 RDB快照模式 概念&#xff1a; 触发时机&#xff1a; 异步做快照 AOF追加模式 概念&#xff1a; 触发时机&#xff1a; bgrewriteaof命令&#xff1a; 比较两种模式&#xff1a; RDB快照模式 概念&#xff1a; RDB模式就是保存当前Redis的状态到本地磁盘文件&am…

kubeadm部署Kubernetes(k8s) 1.23.0高可用集群

Kubernetes介绍 kubernetes(k8s)是2015年由Google公司基于Go语言编写的一款开源的容器集群编排系统,用于自动化容器的部署、扩缩容和管理; kubernetes(k8s)是基于Google内部的Borg系统的特征开发的一个版本,集成了Borg系统大部分优势; 官方地址:https://Kubernetes…

AttributeError: cannot assign module before Module.__init__() call

原因 调用了自定义的类&#xff0c;但是在自定义的类的__init__函数下面没有写super( XXX, self ).init() 错误案例 import torch import torch.nn as nnclass SelfAttention(nn.Module):""" Self-Attention """def __init__(self, n_head, d…

HTML5打开本地app应用的方法

大家好我是咕噜美乐蒂&#xff0c;很高兴又和大家见面了&#xff01; 打开本地应用程序是一种常见的需求&#xff0c;特别是在Web应用程序需要与本地设备或应用程序进行交互时。HTML5并不直接支持通过Web页面直接打开本地应用程序&#xff0c;但可以通过一些间接的方式实现这一…