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,这里记录一下如何实现.转载 ...
随机推荐
- 点分 TREE
/* 1468: Tree Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 774 Solved: 412[Submit][Status][Discus ...
- 【IOI2019】2048矩形模拟
/* dos windows 25*80 */ #include <algorithm> #include <windows.h> #include <iostream& ...
- Codeforces 704E Iron Man [树链剖分,计算几何]
Codeforces 这题--真是搞死我了-- 好不容易下定了决心要不颓废,要写题,结果一调就调了十几个小时-- 思路 我们发现在树上做非常不舒服,于是树链剖分之后一次在重链上的移动就可以看做是在df ...
- 使用开源软件 jumpserver 搭造自己的堡垒机
使用开源软件 jumpserver 搭造自己的堡垒机 开软地址:https://github.com/jumpserver/jumpserver 目前版本:1.5.2 测试的时候有少许BUG,但功能却 ...
- node的小知识点
今天开始阅读node.js深入浅出这本书,阅读过程中会对某些理解有新的认识,所以特地把这些新认识或者知识点记录在这篇博客中 1.nodejs的优势在于 事件驱动.高并发.异步I/O 不适合cpu密集型 ...
- 经常用到(创建OS)的命令
1. 将汇编代码编译为二进制模块文件 nasm mbr.asm -o mbr nasm loader.asm -o loader 2. 将wirte.c ...
- Collections用法总结
Collections是一个包装类,其中包含有各种有关集合操作的静态多态方,比如可以作用在List和Set上,此类不能实例化. 排序Integer[] array = new Integer[]{3, ...
- Lasso回归的坐标下降法推导
目标函数 Lasso相当于带有L1正则化项的线性回归.先看下目标函数:RSS(w)+λ∥w∥1=∑Ni=0(yi−∑Dj=0wjhj(xi))2+λ∑Dj=0∣wj∣RSS(w)+λ∥w∥1=∑i=0 ...
- [转] node.js express的安装与部署,以及pm2下的运行启动。
node.js 下的express 安装可以参考官方网站的 http://www.expressjs.com.cn/ 这里主要讲一下一些不同的地方,将我们生成的dist文件夹里的文件放在public里 ...
- linux内核是如何支持深度睡眠(deep sleep)方式的?
1. 硬件架构 arm64 2. 内核版本 4.19 3. 分析相关函数 setup_arch() -> psci_dt_init() -> psci_0_2_init() -> g ...