vue+element-ui 实现table单元格点击编辑,并且按上下左右键单元格之间切换
通过我的测试我发现两个两种方法来编辑单元格的内容
第一种点击编辑:
我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除,
代码如下:
if (column.label != "日期") {
if(cell.children.length>1){return} ////防止点击cell再次创建input输入框
var cellInput = document.createElement("input");
cellInput.setAttribute("type", "text");
cellInput.setAttribute("class", "edit");
cellInput.value =cell.children[0].innerText;
cellInput.style.width = "100%";
cellInput.style.border = "none";
cellInput.style.backgroundColor = "transparent";
cellInput.style.paddingLeft = "10px";
cellInput.style.outline = "none";
oldel.style.display = " none";
cell.appendChild(cellInput);
cellInput.focus(); //主动聚焦
cellInput.onblur = function() {
oldel.innerHTML = cellInput.value;
oldel.style.display = "block";
cell.removeChild(cellInput);
//event.target.innerHTML = cellInput.value;
};
}
第二种方法:
通过contentEditable来控制元素可以输入编辑
代码如下:
celledit(row, column, cell, event) {
cell.contentEditable = true;
cell.focus()
}
不需要太多,只要两行就行;
上面实现了点击编辑单个单元格的功能,现在还要实现通过键盘按上下左右在不同单元格进行切换;这样更利于用户体验
因为我使用的是Element+vue,如果你也使用的这个复制粘贴可以拿过去直接用;所以如果其他使用这个可能要进行一些改变;
let self = this;
if (boolen == true) {
document.onkeydown = function(e) {
console.log(e);
var curel = document.activeElement; //当前元素
var curcellIndex = curel.cellIndex; // 当前元素行单元格索引
var curRowIndex = curel.parentElement.sectionRowIndex; //当前元素行的索引;
var curtbody = curel.parentElement.parentElement.children; //当前tbody内容的整个表单
curel.onblur = function() {
console.log(curel.innerText);
self.check(curel.innerText);
};
if (e.keyCode == 38) {
//按上键
if (curRowIndex - 1 < 0) {
curel.contentEditable = false;
curtbody[curtbody.length - 1].children[
curcellIndex
].contentEditable = true;
curtbody[curtbody.length - 1].children[curcellIndex].focus();
} else {
curel.contentEditable = false;
curtbody[curRowIndex - 1].children[
curcellIndex
].contentEditable = true;
curtbody[curRowIndex - 1].children[curcellIndex].focus();
}
} else if (e.keyCode == 37) {
let preCellindex =
curtbody[curtbody.length - 1].children.length - 1;
console.log("preRow", curel.parentElement.children.length);
//键盘按钮左键
if (curcellIndex - 1 == 0) {
if (curRowIndex - 1 < 0) {
curel.contentEditable = false;
curtbody[curtbody.length - 1].children[
preCellindex
].contentEditable = true;
curtbody[curtbody.length - 1].children[preCellindex].focus();
} else {
curel.contentEditable = false;
curtbody[curRowIndex - 1].children[
preCellindex
].contentEditable = true;
curtbody[curRowIndex - 1].children[preCellindex].focus();
}
} else {
curel.contentEditable = false;
curel.parentElement.children[
curcellIndex - 1
].contentEditable = true;
curel.parentElement.children[curcellIndex - 1].focus();
}
} else if (e.keyCode == 39 || e.keyCode == 9) {
//键盘按钮右键
e.preventDefault();
if (curcellIndex + 1 == curel.parentElement.children.length) {
if (curRowIndex + 1 == curtbody.length) {
curel.contentEditable = false;
curtbody[0].children[1].contentEditable = true;
curtbody[0].children[1].focus();
} else {
curel.contentEditable = false;
curtbody[curRowIndex + 1].children[1].contentEditable = true;
curtbody[curRowIndex + 1].children[1].focus();
}
} else {
curel.contentEditable = false;
curel.parentElement.children[
curcellIndex + 1
].contentEditable = true;
curel.parentElement.children[curcellIndex + 1].focus();
}
} else if (e.keyCode == 40 || e.keyCode == 13) {
//向下按钮按键
e.preventDefault();
if (curRowIndex + 1 == curtbody.length) {
curel.contentEditable = false;
curtbody[0].children[curcellIndex].contentEditable = true;
curtbody[0].children[curcellIndex].focus();
} else {
curel.contentEditable = false;
curtbody[curRowIndex + 1].children[
curcellIndex
].contentEditable = true;
curtbody[curRowIndex + 1].children[curcellIndex].focus();
}
}
};
}
vue+element-ui 实现table单元格点击编辑,并且按上下左右键单元格之间切换的更多相关文章
- VUE+Element UI实现简单的表格行内编辑效果
原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
随机推荐
- Firefox 英文改中文
小书匠kindle 在Linux上安装好Firefox后,想进设置界面个性化一下,想看看浏览历史,无奈Linux上默认的Firefox是英文设置界面的,对于我种强迫症不能忍. 刚开始还在设置界面下搜索 ...
- Java学习日记基础篇(八) —— 二进制、位运算、位移运算
二进制 二进制是逢2进位的进位置,0,1是基本算符 原码反码补码 在基本数据类型那里,有详细解释 二进制的最高位数是符号位:0表示整数,1表示负数 正数的原码,反码,补码都一样 负数的反码 = 它的原 ...
- ubuntu video and audio
推荐你直接安装ubuntu-studio系统.里面有默认安装了很多多媒体软件,主要集中在4个方面1.音频编辑:Jack, Ardour, Audacity, Qtractor. Hydrogen, Y ...
- 2018-2019-2 网络对抗技术 20165311 Exp 8 Web基础
2018-2019-2 网络对抗技术 20165311 Exp 8 Web基础 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt 3.Web后端:MySQL基础 ...
- equal numbers
给你一个n长度的数组,让你修改0到n次,问每次修改后能剩下不同个数的最小数是多少: 这里有了两种做法,一种是变成他们的lcm这样的话,修改后答案应该是减去改过的个数然后在加一 另一种就是数字修改成序列 ...
- 反向代理Nginx
引用:https://baijiahao.baidu.com/s?id=1600687025749463237&wfr=spider&for=pc 参考下图,正向代理用途:Client ...
- ST (Sparse Table:稀疏表)算法
1541:[例 1]数列区间最大值 时间限制: 1000 ms 内存限制: 524288 KB提交数: 600 通过数: 207 [题目描述] 输入一串数字,给你 MM 个询问 ...
- 机器学习 - 算法 - Xgboost 数学原理推导
工作原理 基于集成算法的多个树累加, 可以理解为是弱分类器的提升模型 公式表达 基本公式 目标函数 目标函数这里加入了损失函数计算 这里的公式是用的均方误差方式来计算 最优函数解 要对所有的样本的损失 ...
- 命令行启动python的IDLE
如果你电脑上使用了anaconda2,默认路径为python2,但是你又想使用anaconda2下的python3的idle 方法如下: 首先查看python的路径: (deeplearning3) ...
- 前后端分离session不一致问题
前端VUE.js 后端SSM 问题描述: 该项目的登录先由后台生成一验证码返回给前端,并保存在session中,不过当前端登录时,后台会报 NullPointerException,看前端的请求头才发 ...