热门标签
热门文章
- 1git-1_远程仓库相关命令_和远程仓库相关的git命令
- 2CVPR 2023 | 中山大学HCP实验室新突破：用因果范式再升级多模态大模型
- 3小程序包括uniapp针对安全区域env(safe-area-inset-*)兼容_uniapp safearea
- 4【附源码】计算机毕业设计java疫苗接种管理系统设计与实现
- 5windows安装anaconda最详细教程_window anaconda
- 6Springboot监控之一：SpringBoot四大神器之Actuator （Spring Boot Admin）_sentinel和actuator和springbootadmin
- 7key-value键值型数据库：Redis
- 8mysql怎么解析json字符串_mysql解析json字符串
- 9机器学习数据预处理_09_机器学习数据预处理.
- 10arcpy实现空间查询_基于PYTHON及ARCPY的多进程空间数据检查任务实现
当前位置: article > 正文
vue+element-ui 实现table单元格点击编辑，并且按上下键移动_element表格下一页切换效果,从下往上
作者：盐析白兔 | 2024-02-19 11:57:07
赞
踩
element表格下一页切换效果,从下往上
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 = true this.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 -= 1 if (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]) ; } } },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/114570
推荐阅读
相关标签
