vue+element-ui 实现table单元格点击编辑，并且按上下键移动

1.接到需求是点击键盘上下键，控制输入框移动方便输入数据

2.相关实现代码

<el-table-column label="档距(m)" prop="span" width="120" align="center"><template slot-scope="scope"><el-input size="mini"  placeholder="请填写值":value="scope.row.span"@input="handlerNumberChange($event,scope.row)"@click.native="handleNative"/></template></el-table-column>//==============handleNative(){const len = this.list.length ;document.onkeydown = (v)=>{if (document.activeElement.nodeName.toLocaleLowerCase() !== "input") {return document.onkeydown = null;}let curel = document.activeElement ; //文档中当前获得焦点的元素while(curel.nodeName.toLocaleLowerCase() !== "td" &&  curel.nodeName.toLocaleLowerCase() !== "body") {curel = curel.parentElement}if (curel.nodeName.toLocaleLowerCase() === "body") {return  document.onkeydown = null;}const curcellIndex = curel.cellIndex; // 当前元素列单元格索引// 当前所在table（this.list） 的行的index : sectionRowIndex let index = curel.parentElement.sectionRowIndex ;let curtbody = curel.parentElement; //当前tbody内容的整个表单while(curtbody.nodeName.toLocaleLowerCase() !== "tbody") {curtbody = curtbody.parentElement}const rowItem = i => curtbody.children[i].children[curcellIndex] ;// 13 enter| 40 下 |  38 上let flag = false;if (v.keyCode === 40 || v.keyCode === 38) {flag = truethis.oldInputNode = rowItem(index).getElementsByTagName('input')[0];this.oldRow = this.list[index] ;}if (v.keyCode === 40) {index += 1;if (index === len) {  index = 0  } }if (v.keyCode === 38) {index -= 1if (index < 0 ) {  index = len - 1 } }if (flag) {const inputNode = rowItem(index).getElementsByTagName('input')[0] ;if (inputNode.dataset.disabled) {this.oldInputNode && this.oldInputNode.blur()}else{inputNode.focus() ;}this.$refs.table.setCurrentRow(this.list[index]) ;}  }},

参考：https://www.cnblogs.com/Tohold/p/9559092.html

vue+element-ui 实现table单元格点击编辑，并且按上下键移动相关推荐

VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换
通过我的测试我发现两个两种方法来编辑单元格的内容第一种点击编辑: 我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除, 代 ...
【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容
<template><el-table@cell-click="tableCellClick":cell-class-name="({ row, col ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
Element Table 单元格中嵌套表格（Table）合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...

vue+element-ui 实现table单元格点击编辑，并且按上下键移动

vue+element-ui 实现table单元格点击编辑，并且按上下键移动相关推荐

最新文章

热门文章