BiKABI又回来了，今天来分享一下回车代替tab功能，早在很久之前客户提出一个回车可切换的需求，实现了是没错，但是代码写的太繁琐，然而新项目的启动第一个功能就是把回车切换实现，思考了很久，今天来分享一下这两种方法

回车切换到下一个输入宽或下拉框

第一种方法

HTML部分

<el-tabs>
 <el-button icon="el-icon-plus" @click="addAll" size="mini" type="success" style="margin-bottom: 10px">增加</el-button
 >
 <el-button
   v-show="showbutton"
   icon="el-icon-d-arrow-left"
   @click="showhous"
   size="mini"
   type="success"
   style="margin-bottom: 10px"
   title="显示开始结束日期"
 ></el-button>
 <el-button
   v-show="hidebutton"
   icon="el-icon-d-arrow-right"
   @click="hidehous"
   size="mini"
   type="success"
   style="margin-bottom: 10px"
   title="隐藏开始结束日期"
 ></el-button>
 <el-checkbox style="margin-left:10px;" v-model="formData.stockInfo.isInitSip" true-label="0"
   false-label="1">制作SOP/SIP
 </el-checkbox>
 <el-table border :data="formData.orderBomProcessList">
   <el-table-column
     align="center"
     label="序号"
     fixed
     width="50"
   >
     <template slot-scope="scope">{{
       scope.$index + 1
     }}</template>
   </el-table-column>
   <el-table-column
     align="center"
     label="排序"
     fixed
     width="85"
   >
     <template slot-scope="scope">
       <el-button
         style="border-radius: 50%; padding: 5px"
         @click="upLayer(scope.$index, scope.row)"
         icon="el-icon-top"
         size="mini"
       ></el-button>
       <el-button
         style="border-radius: 50%; padding: 5px"
         @click="downLayer(scope.$index, scope.row)"
         icon="el-icon-bottom"
         size="mini"
       ></el-button>
     </template>
   </el-table-column>
   <el-table-column align="center" width="100">
     <template slot="header">
       <span class="btnWarn">*</span>
       <span>工序代码</span>
     </template>
     <template slot-scope="scope">
       <!-- @keydown.native="show($event, scope.$index)" -->
       <el-input
         class="table_input normalB_input table_inputss"
         @keydown.native="
           show($event, scope.$index, scope.row)
         "
         @blur="verification(scope.row, scope.$index)"
         size="mini"
         maxlength="25"
         placeholder="请输入内容"
         v-model="scope.row.processCode"
       ></el-input>
     </template>
   </el-table-column>
   <el-table-column align="center" width="80">
     <template slot="header">
       <span class="btnWarn">*</span>
       <span>工时</span>
     </template>
     <template slot-scope="scope">
       <el-input
         @keydown.native="
           show($event, scope.$index, scope.row)
         "
         @blur="manHourblur(scope.row, scope.$index)"
         class="table_input normalY_input"
         size="mini"
         maxlength="8"
         oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
         placeholder="请输入内容"
         v-model="scope.row.manHour"
       ></el-input>
     </template>
   </el-table-column>
   <el-table-column align="center" width="80">
     <template slot="header">
       <span class="btnWarn">*</span>
       <span>单位</span>
     </template>
     <template slot-scope="scope">
       <!-- <div
         @keydown.enter="
           submitsss($event, scope.$index, scope.row)
         "
         @visible-change="changeValue"
       > -->
         <!-- @keyup.native="show($event, scope.$index)" -->
         <el-select
           size="mini"
           class="table_input focusB_input"
           @keydown.enter.native="
             submitsss($event, scope.$index, scope.row)
           "
           v-model="scope.row.unit"
           placeholder="请选择"
           style="width: 100%,z-index:2000"
         >
           <el-option
             v-for="item in options3"
             :key="item.dictValue"
             :label="item.dictLabel"
             :value="item.dictValue"
           ></el-option>
         </el-select>
       <!-- </div> -->
     </template>
   </el-table-column>
   <el-table-column align="center" label="工费" width="80">
     <template slot-scope="scope">
       <el-select
         size="mini"
         v-model="scope.row.expenseId"
         placeholder="请选择"
         style="width: 100%,z-index:2000"
       >
         <el-option
           v-for="item in scope.row.processExpenseList"
           :key="item.expenseId"
           :label="item.price===0?'0':item.price"
           :value="item.expenseId"
         ></el-option>
       </el-select>
     </template>
   </el-table-column>
   <el-table-column
     label="预计开始时间"
     align="center"
     width="180"
     v-if="yjkssj==1"
   >
     <template slot-scope="scope">
       <!-- <div @keydown.enter.native="keydownexpectedStartTime(scope.$index)"> -->
       <el-date-picker
         style="width: 100%"
         v-model="scope.row.expectedStartTime"
         size="mini"
         format="yyyy-MM-dd HH:mm"
         value-format="yyyy-MM-dd HH:mm"
         type="datetime"
         placeholder="选择日期"
       ></el-date-picker>
       <!-- </div> -->
     </template>
   </el-table-column>
   <el-table-column
     label="预计结束时间"
     align="center"
     width="180"
     v-if="yjkssj==1"
   >
     <template slot-scope="scope">
       <el-date-picker
         style="width: 100%"
         v-model="scope.row.expectedEndTime"
         size="mini"
         format="yyyy-MM-dd HH:mm"
         value-format="yyyy-MM-dd HH:mm"
         type="datetime"
         placeholder="选择日期"
       ></el-date-picker>
     </template>
   </el-table-column>
   <el-table-column label="加工说明" align="center">
     <template slot-scope="scope">
       <el-input
         @keydown.native="
           show($event, scope.$index, scope.row)
         "
         class="table_input badY_input"
         size="mini"
         maxlength="255"
         placeholder="请输入内容"
         v-model="scope.row.remark"
       ></el-input>
     </template>
   </el-table-column>
   <el-table-column
     label="操作"
     fixed="right"
     align="center"
     width="80"
   >
     <template slot-scope="scope">
       <el-button
         type="danger"
         size="mini"
         icon="el-icon-delete"
         @click="delect(scope.$index)"
         >删除</el-button
       >
     </template>
   </el-table-column>
 </el-table>
</el-tabs>

js部分

submitsss(ev, index, row) {
 if (row.unit == "") {
    this.$message.error("请选择单位");
  } else {
    let inputing = document.querySelectorAll(".table_input input");
    let newIndex = index * 4 + 3;
    inputing[newIndex].focus();
  }
},
show(ev, index, row) {
      //获取每一列的input名称
      let normalB_input = document.getElementsByClassName("normalB_input");
      let normalY_input = document.getElementsByClassName("normalY_input");
      let badY_input = document.getElementsByClassName("badY_input");
      let inputAll = document.querySelectorAll(".table_input input");
      let inputsss = document.querySelectorAll(".table_inputss input");
      let newIndex;
      let clssName = ev.target.offsetParent.className;
      //每一列
      if (clssName.indexOf("normalB_input") != -1) {
        newIndex = index * 4 + 1;
      } else if (clssName.indexOf("normalY_input") != -1) {
        newIndex = index * 4 + 2;
      }
      else if (clssName.indexOf("badY_input") != -1) {
        newIndex = index * 4 + 4;
      }
      let lengthing = this.formData.orderBomProcessList.length;
      // enter键跳转到下一个input，并最后一个不是QC就新增
      if (ev.keyCode == 13) {
        if (newIndex === (lengthing - 1) * 4 + 1) {
          if (row.processCode == "") {
            this.$message.error("请输入工序代码");
          } else {
            inputAll[newIndex].focus();
          }
        } else if (newIndex === (lengthing - 1) * 4 + 2) {
          if(row.manHour==0||row.manHour==""||row.manHour==null||row.manHour==undefined){
            this.$message.error("请输入工时");
            row.manHour="";
            return false;
          }
          if (row.unit > 0) {
            newIndex = index * 4 + 3;
            inputAll[newIndex].focus();
          } else {
            newIndex = index * 4 + 2;
            inputAll[newIndex].focus();
          }
        } else if (newIndex === (lengthing - 1) * 4 + 4) {
          if (row.processCode == "QC") {
          } else {
            this.addAll();
            inputAll[newIndex].focus();
          }
        } else {
          inputAll[newIndex].focus();
        }
      }
    },
    //批量新增
    addAll() {
      // let consting = consting+1;
      let list = {
        processCode: "",
        manHour: "",
        makeProcessUnit: "",
        unit: "",
        expenseId:"",
        expectedStartTime: moment(this.DataBomlist.orderDate).format(
          "YYYY-MM-DD HH:mm"
        ),
        expectedEndTime: moment(this.DataBomlist.deliveryTime).format(
          "YYYY-MM-DD HH:mm"
        ),
        remark: "",
        projectNo: this.DataBomlist.projectNo,
        picNo: this.DataBomlist.picNo,
        processNo: "",
        bomUuid: this.bomUuiding,
        orderSerial: this.orderSerialing,
        orderNo: this.orderNoing,
        no: "",
      };
      this.formData.orderBomProcessList.push(list);
    },
    // 单个删除
    delect(index, id) {
      this.formData.orderBomProcessList.splice(index, 1);
      this.formData.orderBomProcessList.map((item, indexs) => {
        this.formData.orderBomProcessList[indexs].no = indexs + 1;
      });
    },

代码已经贴出，说一下逻辑，通过给每一个新增后的输入框增加一个class，通过原生js的方法去获取，然后给他获取到下一个栏位的焦点，这里的一些判断QC什么的可以不看，那只是限制回车到某一个限制条件时让他不能再新增，但是有很大的缺点，第一个就是代码太繁琐，需要每一个都取名一个class，还有一个问题就是还需要算一遍有多少列，根据多少列去切换，所以决定再去想想第二种方法

第二种方法

新建一个公共文件，当组件来使用，列如common.js
公共组件部分

// 表格切换焦点方法 渲染后调用（适应input框）需定义table Id:'table-form' 
export function initInputDOM() {
	const inputDoms = document.querySelectorAll(
		"#table-form .el-input__inner"
	);
	inputDoms.forEach((item, index) => {
		item.setAttribute("data-index", index);
	});
	return inputDoms;
}
// enter调用方法 this.inputDoms=↑ return 值   
export function nextFocus(arr, event, scope) { // 定义：class-name="addColumn"
	if (arr.length === scope.$index + 1) {
		if (scope.column.className === "addColumn") {
			this.addTable() //定义添加行通用方法
			return
		}
	}
	const index = event.target.getAttribute("data-index");
	const nextIndex = parseInt(index) + 1;
	const length = this.inputDoms.length;
	if (nextIndex < length) {
		this.inputDoms[nextIndex].focus();
	} else {
		this.inputDoms[0].focus();
	}
}

main.js全局挂载

import {
    initInputDOM,
    nextFocus,
} from '../src/plugins/utils/common.js' //公共方法
Vue.prototype.initInputDOM = initInputDOM
Vue.prototype.nextFocus = nextFocus

HTML部分

<div class="display_flex_jc mb10">
 <div>
    <el-button type="success" icon="el-icon-plus" size="mini" @click="addTable">新增
    </el-button>
  </div>
</div>
<el-table :data="form.locationInfoList" id="table-form" max-height="300">
  <el-table-column label="序号" type="index" width="50" />
  <el-table-column width="100">
    <template slot="header">
      <span class="redheart">设备名称</span>
    </template>
    <template slot-scope="scope">
      <span v-if="scope.row.ifUse==1?true:false">
        <el-select v-model="scope.row.a" placeholder="请选择设备名称"
        @keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </span>
      <span v-else>{{ scope.row.a }}</span>
    </template>
  </el-table-column>
  <el-table-column label="规格型号">
    <template slot-scope="scope">
      <span v-if="scope.row.ifUse==1?true:false">
        <el-input size="middle" placeholder="请输入规格型号" maxlength="30"
          v-model="scope.row.b" clearable
          @keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)">
        </el-input>
      </span>
      <span v-else>{{ scope.row.b }}</span>
    </template>
  </el-table-column>
  <el-table-column label="生产厂商">
    <template slot-scope="scope">
      <span v-if="scope.row.ifUse==1?true:false">
        <el-input size="middle" placeholder="请输入生产厂商" maxlength="30"
          v-model="scope.row.c" clearable
          @keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)">
        </el-input>
      </span>
      <span v-else>{{ scope.row.c }}</span>
    </template>
  </el-table-column>
  <el-table-column label="生产日期">
    <template slot-scope="scope">
      <span v-if="scope.row.ifUse==1?true:false">
        <el-date-picker
            style="width:100%;"
            v-model="scope.row.d"
            type="date"
            placeholder="选择生产日期"
            @keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)">
        </el-date-picker>
      </span>
      <span v-else>{{ scope.row.d }}</span>
    </template>
  </el-table-column>
  <el-table-column label="设备状态">
    <template slot-scope="scope">
      <span v-if="scope.row.ifUse==1?true:false">
        <el-input size="middle" placeholder="请输入设备状态" maxlength="30"
          v-model="scope.row.e" clearable
          @keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)">
        </el-input>
      </span>
      <span v-else>{{ scope.row.e }}</span>
    </template>
  </el-table-column>
  <el-table-column label="维修结果">
    <template slot-scope="scope">
      <span v-if="scope.row.ifUse==1?true:false">
        <el-select v-model="scope.row.f" placeholder="请选择维修结果"
        @keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </span>
      <span v-else>{{ scope.row.f }}</span>
    </template>
  </el-table-column>
  <el-table-column label="维修记录" class-name="addColumn">
    <template slot-scope="scope">
      <span v-if="scope.row.ifUse==1?true:false">
        <el-input size="middle" placeholder="请输入维修记录" maxlength="30"
          v-model="scope.row.g" clearable
          @keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)">
        </el-input>
      </span>
      <span v-else>{{ scope.row.g }}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="100" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button v-if="scope.row.ifUse==1?true:false" size="mini" type="text"
        icon="el-icon-delete" class="btn_del" @click="delect(scope.$index)">删除
      </el-button>
    </template>
  </el-table-column>
</el-table>

js部分

//按回车键，聚焦下一个input。
      nextFocuss(index) {
        this.$refs.form.$el[index + 1].focus();
      },
      //新增
        addTable() {
          let list = {
            ifUse: "1",
            a: "",
            b: "",
            c: "",
            d: "",
            e: "",
            f: "",
            g: "",
          };
          this.form.locationInfoList.push(list);
          this.$nextTick(() => {
            this.inputDoms = this.initInputDOM()
          })
        },
        //单个删除
        delect(index) {
            this.form.locationInfoList.splice(index, 1);
        },

这一看代码就知道第二种的代码更少，说一下要注意的事项和方法的使用，首先必须要有一个id：table-form，还有必不可少的@keydown.enter.native="nextFocus(form.locationInfoList,$event,scope)"事件，回车到最后一列的时候需要新增需要加上class-name="addColumn"类，就是需要按照定义好的统一的名字来书写，这种方法比第一点好的地方多很多，使用id和每一个输入框带过去的参数作为唯一的值，这就减少了大量的去操作js的定义，获取的繁琐事务，

BiKABI君也想过用ref的方式去进行跳转，但是还是最后还是选择了通过第二种传值的方式，大家可以自己试试用ref的方式实现，实现后记得分享我一下哦！

# javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue