[JavaScript知识库]vue table 监听键盘上下键

columnsName: [
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          sortable: true,
          width: 150,
          render: (h, params) => {
            return h('Input', {
              props: {
                value: params.row.name
              },
                // 每个输入框按照行列规则定义id
              attrs: { id: params.column.key + params.index },
              nativeOn: {
                keydown: (event) => {
                  this.handleKeyup(event, params)
                }
              }
            })
          }
        }
      }

method

    handleKeyup (event, params) {
      // 左
      if (event.keyCode === 37 && params.column._index !== 0) {
        setTimeout(() => {
            // 找到该输入框左边位置的id
          let id = this.columnsName[params.column._index - 1].key + params.index
          document.getElementById(id).children[1].focus()
        }, 50)
      }
      // 上键切换
      if (event.keyCode === 38 && params.index !== 0) {
        setTimeout(() => {
          let id = params.column.key + (params.index - 1)
          document.getElementById(id).children[1].focus()
        }, 50)
      }
      // 右
      if (event.keyCode === 39 && params.column._index !== this.columnsName.length - 2) {
        setTimeout(() => {
          let id = this.columnsName[params.column._index + 1].key + params.index
          document.getElementById(id).children[1].focus()
        }, 50)
      }
      // 下
      if (event.keyCode === 40 && params.index !== this.list.length - 1) {
        setTimeout(() => {
          let id = params.column.key + (params.index + 1)
          document.getElementById(id).children[1].focus()
        }, 50)
      }
    },