1. 給表格行、列賦值index；獲取表格的總列數(shù)

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

tableRowClassName({row, column, rowIndex, columnIndex}) {
      this.maxColumnIndex = columnIndex   //獲取表格的列數(shù)
      row.index = rowIndex
      column.index = columnIndex
},

2. 當(dāng)某個(gè)單元格被點(diǎn)擊時(shí) 獲取行列 觸發(fā)及鍵盤(pán)事件

@cell-click="handleCellClick"

handleCellClick(row, column) {
  let activeElement = document.activeElement.nodeName.toLocaleLowerCase()  //當(dāng)前獲取焦點(diǎn)的元素
  //只有Input才有焦點(diǎn)事件
? ?if(activeElement == 'input') {
      //當(dāng)前獲取焦點(diǎn)的元素，屬于表格的第幾行的第幾個(gè)元素
    this.currentClickEl = {
      rowIndex: row.index,
      columnIndex: column.index
    }
    this.keyDown()
  } else {
    this.currentClickEl = null
  }
 },
//添加鍵盤(pán)事件  得到上下左右鍵的點(diǎn)擊；取消tab鍵的默認(rèn)行為
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();   //阻止默認(rèn)行為
    }
  }
},
//判斷：上鍵的時(shí)候：行的Index減1，到0停止
//判斷：下鍵的時(shí)候：行的Index加1，到表格的最后一行停止；表格的最后一行取決于表格數(shù)據(jù)的數(shù)組
//判斷：左鍵的時(shí)候：列的index減1，到index=0停止
//判斷：右鍵的時(shí)候：列的index加1，到表格的最大列數(shù)停止
//給input框賦值動(dòng)態(tài)id，獲取到這個(gè)id；給這個(gè)元素獲取焦點(diǎn)
//判斷：當(dāng)前的元素是不是input框，表格里面判斷是不是都是輸入框，不是的時(shí)候跳到下一個(gè)輸入框
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文章來(lái)源地址http://www.zghlxwxcb.cn/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">表頭名稱(chēng)</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>