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

最新推荐文章于 2026-06-22 10:51:16 发布

原创最新推荐文章于 2026-06-22 10:51:16 发布 · 1.8k 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了一种在Vue应用中实现在表格中修改数据后，通过快捷键向下一行复制的方法。作者通过监听键盘事件并利用`$refs`获取当前行数据，然后更新下一行的特定字段，实现了快捷复制的功能。代码示例展示了如何操作表格组件的当前行，并提供了关键代码片段。

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

直接上代码：

<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

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

标签

#vue.js #javascript #前端