vue中el-table如何实现快捷键对表格的添加删除?

Question

问题描述

当选中某一行时,点击'insert'使表格增加一行,并将光标移动到增加行第一列;
当选中某一行时,点击'delete'删除当前行;
当表格行都被删除时,点击表格内的空白部分,再点击'insert'使表格增加一行

问题出现的环境背景及自己尝试过哪些方法

在<el-table>中使用@keyup.45.native,但只在input等可编辑框中有效,在type=index的框中无法触发键盘点击事件;
也考虑过使用vuex,但查了一下也没有实现方法..
如何在row-click中对键盘点击事件做出判断?或者如何在<el-table-column label="发明人序号" prop="fmr.famingrxh" type="index" width="150" align="center"/>中添加键盘点击事件?

相关代码

粘贴代码文本（请勿用截图）

                <el-table
                :max-height="300"
                ref="multipleTable"
                :data="dataForm.fmr"
                :highlight-current-row="true"
                style="width: 100%;  overflow-y: auto;margin-bottom:6px;"
                @row-click="handleRowClick"
                @keyup.45.native="insertRow()"
                @keyup.46.native="deleteRow(index)"
              >
                <el-table-column label="发明人序号" prop="fmr.famingrxh" type="index" width="150" align="center"> </el-table-column>
                <el-table-column prop="fmr.famingrxm" label="发明人姓名" align="center" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <!-- <gs-input @keyup.insert.native="insertRow()" @keyup.46.native="deleteRow(scope.$index)" placeholder="请输入发明人姓名" v-model="scope.row.famingrxm" clearable /> -->
                    <gs-input placeholder="请输入发明人姓名" v-model="scope.row.famingrxm" clearable />
                  </template>
                </el-table-column>
              </el-table>
              
  methods:{      
  handleRowClick(row, column, event) {
  console.log('click!!!')
  console.log(row, event)
  console.log(event.keyCode)
  if (event.keyCode === 45) {
    console.log('insert触发')
  } else if (event.keyCode === 46) {
    console.log('delete触发')
  }
  // this.fmrkey = row
},
insertRow() {
  console.log('insert!!!')
  const newValue = {
    famingrxm: '',
    bugongkbz: ''
  }
  this.dataForm.fmr.push(newValue)
},
deleteRow(index) {
  console.log('delete!!!')
  console.log(index)
  // if (typeof index !== 'undefined') {
  this.dataForm.fmr.splice(index, 1)
  // }
}
}
              
         

Answer 1

大概描述一下思路，你可以尝试看看

1. 在通过 @current-change 修改当前选中item的key，或者使用多选表格形式 @selection-change。
2. 在 document 使用 onkeydown 绑定一个自定义的方法，然后根据不同 evn.keyCode || evn.which || evn.charCode 来触发你的表单操作
3. 如果空表格，你可以用 slot="empty" 来传入一个 add 按钮来实现插入行，就不需要再点击 insert 键了

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。