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组件封装地址
