vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

1、此功能已集成到TTable组件中

2、最终效果

3、关键代码

 // 键盘事件handleKeyup(event, index, key) {if (!this.isKeyup) returnthis.copyTableData = JSON.parse(JSON.stringify(this.tableData))// 向上键if (event.keyCode === 38) {// 获取到所有class为[key]的dom列表let doms = document.getElementsByClassName(key)if (!index) {index = this.copyTableData.length}// 选中类表中第index个，向上故而减1，dom里头包含的input，获取焦点以及选中input里的内容if (doms.length) {let domif (doms[index - 1].getElementsByTagName('input')[0]) {dom = doms[index - 1].getElementsByTagName('input')[0]} else {dom = doms[index - 1].getElementsByTagName('textarea')[0]}dom.focus()// dom.select()}}// 向下键if (event.keyCode === 40) {let doms = document.getElementsByClassName(key)if (+index === this.copyTableData.length - 1) {index = -1}if (doms.length) {let domif (doms[index + 1].getElementsByTagName('input')[0]) {dom = doms[index + 1].getElementsByTagName('input')[0]} else {dom = doms[index + 1].getElementsByTagName('textarea')[0]}dom.focus()// dom.select()}}// 回车向右移动if (event.keyCode === 13) {let keyName = this.columns.map(val => val.prop)let num = 0if (key === keyName[keyName.length - 1]) {if (index === this.copyTableData.length - 1) {index = 0} else {++index}} else {keyName.map((v, i) => {if (v === key) {num = i + 1}})}let doms = document.getElementsByClassName(keyName[num])if (doms.length) {let domif (doms[index].getElementsByTagName('input')[0]) {dom = doms[index].getElementsByTagName('input')[0]} else {dom = doms[index].getElementsByTagName('textarea')[0]}dom.focus()// dom.select()}}},

4、注意点

1、如果单元格编辑使用了插槽功能，需要在插槽上添加一个class(这个类即：当前列的porp值)
2、porp不能重复（正常也不会存在）

5、demo地址

GitHub源码地址

Gitee源码地址

基于ElementUi或Antd再次封装基础组件文档

TTable组件封装地址

vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)相关推荐

vue项目element-ui的table表格单元格合并
一.合并效果二全部代码 <template><div class="table-wrap"><el-table:data="tableDa ...
element-ui 设置table表格单元格背景样式
在table表格绑定call-style属性,声明一个方法就可以设置样式了: <el-table border stripe height="76vh" v-loading= ...
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
Layui table表格单元格合并问题
Layui table表格单元格合并人丑话不多, 直接上方法: /*** * @param fieldName 要合并列的field属性值* @param index 表格的索引值从1开始* @d ...
ElementUI如何校验表格单元格内容？其实很简单
提要这篇文章算是<深入了解 Element Form 表单动态验证问题>的延伸. 相信大伙肯定遇到过这样的需求,在一个表单内容里面嵌套一个表格,同时需要校验表格里面的某些单元格内容,如果 ...
table表格单元格padding_html表格单元格间距
html中单元格间距与单元格边距的区别就是cellspacing和cellpadding之间的区别,赐教. 定义和用法 cellSpacing 属性可设置或返回在表格中的单元格之间的空白量(以像素为单 ...
iview table表格单元格的动态合并
1. 需求需要将从后台获取的数据,在前端渲染时,如果同一列相邻的数据相同,则合并成一个单元格. 即: 需要将上图两个单元格合并,成果图如下 2. 问题本项目使用的是iview组件,iview组件也 ...
table表格单元格的合并详解
1.html实现表格 <el-tablemax-height="300":columns="columns":data="tableData&q ...

vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

1、此功能已集成到TTable组件中

2、最终效果

3、关键代码

4、注意点

5、demo地址

vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)相关推荐

最新文章

热门文章