vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)_vue中如何给当前页面的单个模块添加键盘事件

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()
        }
      }
    },
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
61
62
63
64
65
66
67
68
69
70

4、注意点

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

5、demo地址

GitHub源码地址

Gitee源码地址

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

TTable组件封装地址