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()
    },