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

本文主要是介绍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左键双击单元格编辑内容(输入框输入计算公式可直接得出结果),右键单击展示操作菜单,可编辑单元格高亮展示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/809199

相关文章

Python实现word文档内容智能提取以及合成

《Python实现word文档内容智能提取以及合成》这篇文章主要为大家详细介绍了如何使用Python实现从10个左右的docx文档中抽取内容,再调整语言风格后生成新的文档,感兴趣的小伙伴可以了解一下... 目录核心思路技术路径实现步骤阶段一:准备工作阶段二:内容提取 (python 脚本)阶段三:语言风格调

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

一文详解如何在Python中从字符串中提取部分内容

《一文详解如何在Python中从字符串中提取部分内容》:本文主要介绍如何在Python中从字符串中提取部分内容的相关资料,包括使用正则表达式、Pyparsing库、AST(抽象语法树)、字符串操作... 目录前言解决方案方法一:使用正则表达式方法二:使用 Pyparsing方法三:使用 AST方法四:使用字

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()?为什么使用 with open()?使用 with open() 进行

Linux ls命令操作详解

《Linuxls命令操作详解》通过ls命令,我们可以查看指定目录下的文件和子目录,并结合不同的选项获取详细的文件信息,如权限、大小、修改时间等,:本文主要介绍Linuxls命令详解,需要的朋友可... 目录1. 命令简介2. 命令的基本语法和用法2.1 语法格式2.2 使用示例2.2.1 列出当前目录下的文

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3