原始需求:表格中数据修改后可以按快捷键向下一行一行复制
直接上代码:
<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
拿到当前行,开始网上搜教程,几乎全都是使用插槽的操作还要使用点击事件才能拿到当前行索引,很少有键盘监听的。