el-table中实现用键盘控制移动Cell的选中

前言

公司产品需求 要求一个考勤表能使用键盘方向键控制当前选中Cell，回车触发弹窗显示和修改

实现

首选给需要获取键盘事件的元素添加tabIndex="0"属性，注意div这种元素默认没有focus属性，并且没有keyup这种事件

然后我们定义一个选中的模型

selectedCell: { // 当前table中选择的cell
    row: '',
    col: ''
},

在el-table中去实现cell的选择效果，这里要利用cell-class-name属性去实现，

// 点击cell的时候激活状态
    activeCell({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.selectedCell.row && columnIndex === this.selectedCell.col) {
        return 'selected-cell'
      }
      return ''
    },

.selected-cell {
    border: 2px solid #67C23A;
    background-color: #f0f9eb;
  }

当你点击Cell的时候触发的事件中传入对应的rowIndex和columnIndex存到this.selectedCell中，这样就是实现了点击Cell加上一个类.selected-cell从而实现高亮。

接下来我们需要实现键盘方向键控制高亮的显示，注意处理index超出或者小于0的情况

// 键盘触发修改
    changeCellSelect(direction) {
      let { row, col } = this.selectedCell
      switch (direction) {
        case 'right':
          col === this.callbackdata.data[0].length - 1 ? col = 0 : col++
          break
        case 'left':
          col === 0 ? col = this.callbackdata.data[0].length - 1 : col--
          break
        case 'up':
          row === 0 ? row = this.callbackdata.data.length - 1 : row--
          break
        case 'down':
          row === this.callbackdata.data.length - 1 ? row = 0 : row++
          break
      }
      this.selectedCell = { row, col }
    },

注意

当在点击cell触发dialog去修改内容，关闭dialog后，键盘方向键不能触发cell的移动，原因是由于dialog是appendToBody,所以需要给div手动重新获取焦点，使用dialog的close方法调用focus

  // 关闭修改的dialog时候 让最外层div.attend-container 重获焦点
    attendContainerfocus() {
      this.$refs.attendContainer.focus()
    },