【前端小技能】ElementUI表格双击可编辑--开箱即用

记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨

在工作中，碰到了双击可修改表格内容的需求，项目采用的是ElementUI前端框架

1、在表格中声明双击事件

<el-table......@cell-dblclick="tableDbEdit"......
</el-table>

2、编写方法实现功能

tableDbEdit(row, column, cell, event) {console.log(row, column, cell, event);// 定义我们要排除的编辑的列，let noEditColumns = [];// 全表格可编辑的话直接注释下一行即可noEditColumns = ["name", "sid", "priority", "classtypeChinese", "操作"];/*** 注意对应关系* 1、column.property--对应的是我们的数据列名* 2、column.label ---对应的是标题的中文名称* */ if (noEditColumns.indexOf(column.property) != -1) {return;}// 记录要编辑的表格，原本的值let msg = row[column.property];event.target.innerHTML = "";// 双击添加input框let cellInput = document.createElement("input");//设置input框样式及类型cellInput.value = msg;cellInput.setAttribute("type", "input");cellInput.style.width = "80%";cellInput.style.height = "30px";cellInput.style.paddingLeft = "10px";cellInput.style.border = "1px solid #288EFE";cellInput.style.borderRadius = "3px";cell.appendChild(cellInput);// --注意此处需要将焦点设置给cellInput，否则onBlur不好使cellInput.focus();//为鼠标添加失去焦点事件cellInput.onblur = async () => {// 判断输入是否为空，为空则删除inputif (cellInput.value == "") {cell.removeChild(cellInput);event.target.innerHTML = msg;} else {cell.removeChild(cellInput);// 修改值event.target.innerHTML = cellInput.value;// 自己的请求在这里书写，下边只是示例let form = {sid: column.property === 'sid' ? cellInput.value : row.sid, tag: column.property === 'tag' ? cellInput.value : row.tag,msg: column.property === 'msg' ? cellInput.value : row.msg,chineseName: column.property === 'chineseName' ? cellInput.value : row.chineseName}const {data} = await RuleUpdate(form)console.log(data)}};},

3、双击看效果

除去我们定义的排除编辑的列，其余列都可以进行进行双击修改的操作。

【前端小技能】ElementUI表格双击可编辑--开箱即用相关推荐

前端的ElementUI表格里面的编辑前后的值的获取
文章目录 1.点击修改按钮获取之前的值: 2.在修改事件里面进行获取值注意不可以直接 this.oldRow = row 3. 保存的时候获取新的值和旧的值 4. 使用的打印看看,原来的表格里面的没 ...
ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)
项目中遇到的问题: 在elementui中表格点击按钮传值的时候,通过bus中的$emit传对象,在弹出的模态框中用bus的$on接收对象,然后对传的对象进行改变,结果发现改变了原表格的数据. 然后就 ...
el-table/element-ui 表格实现行编辑
珊妹儿最近一直项目需求要用el-table实现行编辑,这个功能嘛,是我领导写的,我呢,拿出来给大家借鉴一下,如果你们有更好的建议,欢迎留言~ 实现思路: 1.表格数据我们拿到后,每一行都加个变量作为判 ...
前端基础学习-element-ui表格表头做成斜线表头
这部分代码样式部分参照表头斜线首先上效果图这里主要是针对二级表头对其样式进行选择修改,这里需要注意一定要是二级表头才能做出这样的效果 html代码 <el-table :data=" ...
前端小项目3 # DoubleClickHeart 双击图片产生爱心动效
涉及知识点鼠标事件 JavaScript操作DOM节点闭包 HTML中鼠标点击的位置信息 animation 动画引入图标字体库介绍双击图片,在点击处显示爱心动画效果并更新累计点击次数. 代 ...
前端小技能：利用action-type按钮事件实现批量删除
文章目录引言 I 利用action-type按钮事件实现批量删除 1.1 action-type 汇总 1.2 HTML DOM setInterval() :周期(以毫秒计)调用执行函数/表达式 ...
【前端小技能】vue + highcharts 绘制世界地图及各个国家的地图
项目用的是vue,工作需求是:绘制世界地图,然后通过世界地图点击可以跳转到各个国家的地图,之前只单独做过世界地图+中国地图,查询资料了解到了highCharts-vue,让我们开始吧. 在vue项目基 ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...

【前端小技能】ElementUI表格双击可编辑--开箱即用

1、在表格中声明双击事件

2、编写方法实现功能

3、双击看效果

【前端小技能】ElementUI表格双击可编辑--开箱即用相关推荐

最新文章

热门文章