通过我的测试我发现两个两种方法来编辑单元格的内容

第一种点击编辑:

我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除,

代码如下:

let oldel = cell.children[0]
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();}}};}

转载于:https://www.cnblogs.com/Tohold/p/9559092.html

vue+element-ui 实现table单元格点击编辑,并且按上下左右键单元格之间切换相关推荐

  1. vue+element UI的 table组件实现日历

    有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件 核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...

  2. 【技巧】实现饿了么Element UI的table单击(点击)编辑单元格内容

    <template><el-table@cell-click="tableCellClick":cell-class-name="({ row, col ...

  3. VUE element ui 动态合并单元格问题

    ** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...

  4. Element UI 的 table 单元格合并

    项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...

  5. 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框

    文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...

  6. 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出

    文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

  7. 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由

    文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

  8. 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)

    文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

  9. vue+element ui表单校验(邮箱、电话、工商信息)

    vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

  10. vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...

    点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...

最新文章

  1. 2021中国国际消费电子博览会和青岛国际软件融合创新博览会盛大开幕
  2. oracle proc 定义宿主,oracle proc 编程基础及最小化案例
  3. zabbix监控系列(5)之通过trap模式监控网络设备
  4. mysql新增阵列df_DF学Mysql(三)——索引操作
  5. 网易2018校招内推编程题 小易喜欢的数列
  6. 什么是数据挖掘技术,基本概念是什么?
  7. Silvaco TCAD仿真学习Lesson2——Athena仿真
  8. k8s免fq下载镜像
  9. python数据分析经典书籍有哪些_数据分析有哪些好书值得推荐?
  10. 人工智能导论——遗传算法求解TSP问题实验
  11. 面试太卷,我选择背八股。。。
  12. ​深圳国际会展中心希尔顿、茂名浪漫海岸喜来登度假、南昌青山湖希尔顿欢朋酒店开业 | 中国酒店周刊...
  13. 基址寻址和变址寻址区别(白话版)
  14. Java基础15-多线程
  15. WDK开发入门1-基础环境搭建和第一个驱动程序(VS2010)
  16. STC8H8K64U学习(自用)
  17. 计算机教育学专业考研科目,计算机考研科目和专业
  18. java 动态导入excel_javaweb之动态读取 excel,导入excel
  19. 大数据项目之电商数仓、数据仓库概念、项目需求及架构设计
  20. matlab求曲线每点的斜率_如何用matlab求出图中各条直线的斜率

热门文章

  1. EasyUI怎么利用onBeforeRender事件
  2. x86保护模式 任务状态段和控制门
  3. getline函数(精华版)
  4. android studio 1.2.1.1导入library project(以sharesdk为例)
  5. 【转】linux shell 逻辑运算符、逻辑表达式
  6. Smartisan OS ROM 小米手机 2/2S 标准版 刷机教程
  7. jquery 设置 select 默认值方法
  8. 【Java】JSON数据交换格式及其使用案例(聊天工具)
  9. Linux之seq命令
  10. 第二sprint总结