vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)
vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)
·
1、此功能已集成到TTable组件中
2、最终效果
3、关键代码
// 键盘事件
handleKeyup(event, index, key) {
if (!this.isKeyup) return
this.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 dom
if (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 dom
if (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 = 0
if (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 dom
if (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地址
更多推荐
已为社区贡献10条内容
所有评论(0)