vue+el-table可輸入表格使用上下鍵進(jìn)行input框切換方式

更新時(shí)間：2025年11月03日 09:30:31 作者：以對(duì)_

文章介紹了如何在使用Vue和Element UI的el-table組件時(shí),通過(guò)上下鍵在輸入框之間切換,并且特別說(shuō)明了如何在完工數(shù)量這一列中使用上下鍵進(jìn)行切換

vue+el-table可輸入表格使用上下鍵進(jìn)行input框切換

使用上下鍵進(jìn)行完工數(shù)量這一列的切換

<el-table :data="form.detailList" @selection-change="handleChildSelection" ref="bChangeOrderChild" max-height="500">
 <!-- <el-table-column type="selection" width="50" align="center"/> -->
 <el-table-column label="序號(hào)" align="center" prop="index" width="50"/>

 <el-table-column label="產(chǎn)品名稱">
   <template slot-scope="scope">
     <el-input v-model="scope.row.materialName" readonly/>
   </template>
 </el-table-column>
 <el-table-column label="完工數(shù)量" prop="wrastNum">
   <template slot-scope="scope">
     <el-input v-model="scope.row.wrastNum" placeholder="請(qǐng)輸入完工數(shù)量" @focus="wrastNumFocus(scope.row)" @keyup.native="show($event,scope.$index)" class="table_input badY_input"/>
   </template>
 </el-table-column>
 <el-table-column label="入庫(kù)批次號(hào)" prop="productBatchNum">
   <template slot-scope="scope">
     <el-input v-model="scope.row.productBatchNum" placeholder="請(qǐng)輸入入庫(kù)批次號(hào)" />
   </template>
 </el-table-column>
 <el-table-column label="開始時(shí)間" prop="planStartTime" width="230">
   <template slot-scope="scope">
     <el-date-picker clearable
       style="width: 100%;"
       v-model="scope.row.planStartTime"
       type="datetime"
       value-format="yyyy-MM-dd HH:mm:ss"
       placeholder="請(qǐng)選擇開始時(shí)間">
     </el-date-picker>
   </template>
 </el-table-column>
 <el-table-column label="結(jié)束時(shí)間" prop="planEndTime" width="230">
   <template slot-scope="scope">
     <el-date-picker clearable
       style="width: 100%;"
       v-model="scope.row.planEndTime"
       type="datetime"
       value-format="yyyy-MM-dd HH:mm:ss"
       placeholder="請(qǐng)選擇結(jié)束時(shí)間">
     </el-date-picker>
   </template>
 </el-table-column>
 <el-table-column label="備注" prop="note">
   <template slot-scope="scope">
     <el-input v-model="scope.row.note" placeholder="請(qǐng)輸入備注" />
   </template>
 </el-table-column>
</el-table>

//鍵盤觸發(fā)事件
show(ev,index){
  let newIndex;
  let inputAll = document.querySelectorAll('.table_input input');

  //向上 =38
  if (ev.keyCode == 38) {

    if( index==0 ) {// 如果是第一行,回到最后一個(gè)
      newIndex = inputAll.length - 1
    }else if( index == inputAll.length ) {// 如果是最后一行，繼續(xù)向上
      newIndex = index - 1
    }else if( index > 0 && index < inputAll.length ) {// 如果是中間行，繼續(xù)向上
      newIndex = index - 1
    }

    if (inputAll[newIndex]) {
      inputAll[newIndex].focus();
    }
  }

  //下 = 40
  if (ev.keyCode == 40) {

    if( index==0 ) {// 如果是第一行,繼續(xù)向下
      newIndex = index+1
    }else if( index == inputAll.length-1 ) {// 如果是最后一行，回到第一個(gè)
      newIndex = 0
    }else if( index > 0 && index < inputAll.length ) {// 如果是中間行，繼續(xù)向下
      newIndex = index + 1
    }

    if (inputAll[newIndex]) {
      inputAll[newIndex].focus();
    }
  }
}