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

前言

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

实现

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

<div
    class="attend-container"
    ref="attendContainer"
    @keyup.right="changeCellSelect('right')"
    @keyup.left="changeCellSelect('left')"
    @keyup.up="changeCellSelect('up')"
    @keyup.down="changeCellSelect('down')"
    @keyup.enter="changeUserData(callbackdata.data[selectedCell.row][selectedCell.col],selectedCell.row,selectedCell.col)"
    tabindex="0"
  >

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

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

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

    <el-table :data="data"
      stripe
      border
      size='mini'
      v-loading="loading"
      :cell-class-name="activeCell"
     >

// 点击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

<el-dialog @close="attendContainerfocus">

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