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

  1. 给表格行、列赋值index;获取表格的总列数

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

tableRowClassName({row, column, rowIndex, columnIndex}) {
      this.maxColumnIndex = columnIndex   //获取表格的列数
      row.index = rowIndex
      column.index = columnIndex
},
  1. 当某个单元格被点击时 获取行列 触发及键盘事件

@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


    
    

你可能感兴趣的:(vue,vue,elementui)