vue+element+键盘监听实现el-table行切换快捷键操作_el-table 键盘监听换行

原始需求：表格中数据修改后可以按快捷键向下一行一行复制

直接上代码：

<template>
  <div id="app">
    <el-table :data="tableData"
              class="data_table"
              ref="itsmDataTable"
              highlight-current-row="highlight-current-row">
      <el-table-column prop="number" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="info" label="描述">
      </el-table-column>
    </el-table>
  </div>
</template>
 
 
<script>
export default {
  data () {
    return {
      tableData: [{
        number: '2016001',
        name: '小明',
        info: '这是第一条数据'
      }, {
        number: '2016002',
        name: '小李',
        info: '这是第二条数据'
      }, {
        number: '2016003',
        name: '小王',
        info: '这是第三条数据'
      }, {
        number: '2016004',
        name: '小罗',
        info: '这是第四条数据'
      }, {
        number: '2016005',
        name: '小蔡',
        info: '这是第五条数据'
      }]
    }
  },
  methods: {
    keyDown() {
      //console.log('键盘安下了')
      if (event.keyCode === 120) {
        //this.$refs.multipleTable.store.states.selection
        //console.log(this.$refs.itsmDataTable.store.states)
        //console.log(this.$refs.itsmDataTable.store.states.currentRow)
        let array = this.tableData
        let current = this.$refs.itsmDataTable.store.states.currentRow
        // 找到current当前行的索引
        for (let i = 0, len = array.length; i < len; i++) {
          if (Object.entries(array[i]).toString() === Object.entries(current).toString()) {
            console.log('当前行索引',i)
            // 如果当前行不是倒数第一行，则修改下一行的name为当前行的值
            if (i < len - 1) {
              array[i+1].name = array[i].name
              // 跳转到下一行
              this.$refs.itsmDataTable.setCurrentRow(array[i + 1])
              break
            }
          }
        }
      }
    }
  },
  mounted() {
    console.log('进入页面了')
    document.addEventListener('keydown', this.keyDown.bind(this))
  }
}
 
</script>
 
<style>
</style>
 

关键点是使用

this.$refs.itsmDataTable.store.states.currentRow

拿到当前行，开始网上搜教程，几乎全都是使用插槽的操作还要使用点击事件才能拿到当前行索引，很少有键盘监听的。