elementui表格插槽使用的input输入框，添加键盘快捷键上下左右箭头，获取焦点-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementui表格插槽使用的input输入框，添加键盘快捷键上下左右箭头，获取焦点。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

给表格行、列赋值index；获取表格的总列数

在el-table 添加 :cell-class-name="tableRowClassName"

tableRowClassName({row, column, rowIndex, columnIndex}) {
      this.maxColumnIndex = columnIndex   //获取表格的列数
      row.index = rowIndex
      column.index = columnIndex
},

当某个单元格被点击时获取行列触发及键盘事件

@cell-click="handleCellClick"

handleCellClick(row, column) {
  let activeElement = document.activeElement.nodeName.toLocaleLowerCase()  //当前获取焦点的元素
  //只有Input才有焦点事件
   if(activeElement == 'input') {
      //当前获取焦点的元素，属于表格的第几行的第几个元素
    this.currentClickEl = {
      rowIndex: row.index,
      columnIndex: column.index
    }
    this.keyDown()
  } else {
    this.currentClickEl = null
  }
 },
//添加键盘事件  得到上下左右键的点击；取消tab键的默认行为
keyDown() {
  let that = this;
  document.onkeydown = (e) => {
    let el = e || e.event || window.enevt || arguments.callee.callee.arguments[0];
    if(!that.currentClickEl) return
    console.log(el.key)
    //上键
    if(el && el.key == 'ArrowUp'){
      that.getIdByIndex('row', -1)
    }
    //下
    if(el && el.key == 'ArrowDown'){
      that.getIdByIndex('row', 1)
    }
    //左
    if(el && el.key == 'ArrowLeft'){
      that.getIdByIndex('column', -1)
    }
    //右
    if(el && el.key == 'ArrowRight'){
      that.getIdByIndex('column', 1)
    }
    if(el && el.key == 'Tab') {
      el.preventDefault();   //阻止默认行为
    }
  }
},
//判断：上键的时候：行的Index减1，到0停止
//判断：下键的时候：行的Index加1，到表格的最后一行停止；表格的最后一行取决于表格数据的数组
//判断：左键的时候：列的index减1，到index=0停止
//判断：右键的时候：列的index加1，到表格的最大列数停止
//给input框赋值动态id，获取到这个id；给这个元素获取焦点
//判断：当前的元素是不是input框，表格里面判断是不是都是输入框，不是的时候跳到下一个输入框
getIdByIndex(type, num) {
  let that = this;
  if(type == 'row') {
    if(num > 0 && that.currentClickEl.rowIndex == that.form.detailsList.length - 1) return
    if(num < 0 && that.currentClickEl.rowIndex == 0) return
    that.currentClickEl.rowIndex = Number(that.currentClickEl.rowIndex) + num
  } else {
    if(num < 0 && that.currentClickEl.columnIndex == 0) {
      that.currentClickEl.columnIndex = 1
      return
    }
    if(num > 0 && that.currentClickEl.columnIndex == that.maxColumnIndex) return
    that.currentClickEl.columnIndex = Number(that.currentClickEl.columnIndex) + num
  }
  let newId = 'id' + String(that.currentClickEl.rowIndex)  + that.currentClickEl.columnIndex
  if(!document.getElementById(newId)) {
    that.getIdByIndex(type, num)
    return
  }
  if(!newId) return
  setTimeout(() => {
    document.getElementById(newId).focus()
  }, 50)
},

给input赋值id文章来源地址https://www.toymoban.com/news/detail-781566.html

<el-table-column prop="ss" label="SS" min-width="80" v-if="form.worksId == 3">
    <template slot="header" slot-scope="scope">
      <div class="tableHeader">表头名称</div>
    </template>
    <template slot-scope="scope">
      <el-input :id="'id' + scope.row.index + scope.column.index" class="tableInput" v-model="scope.row.ss" clearable oninput="value=value.replace(/[^\d\.]/g,'')"></el-input>
    </template>
</el-table-column>

到了这里，关于elementui表格插槽使用的input输入框，添加键盘快捷键上下左右箭头，获取焦点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！