前端通过input 输入框实现动态添加行 , 键盘上下左右点击可同步操作中心位置

1. input 代码 ,我们项目组的input封装了,不过不影响使用

通过 @keyup 事件绑定show方法,需要将当前行的信息以及index传递,方便操作

另外要单独给这些需要操作的输入框添加class,方便后面获取

  <el-table-column className="mycell"  min-width="auto;" align="center"  label="尺寸" >

                      <template #default="scope">

                        <hd-inputupp @keyup="show($event,scope.$index)" class="table_input normalB_input" v-model="scope.row.clothSize" >

                            <template #append>

                                <div style="color:red;line-height: 24px">*</div>

                            </template>

                        </hd-inputupp>

                    </template>

                  </el-table-column>

                  <el-table-column className="mycell" min-width="auto;" align="center" label="用量(KG)" >

                    <template #default="scope">

                      <el-input @keyup="show($event,scope.$index)"   class="table_input normalY_input" v-model="scope.row.amount" >

                          <template #append>

                              <div style="color:red;line-height: 24px">*</div>

                          </template>

                      </el-input>

                    </template>

                  </el-table-column>

                  <el-table-column className="mycell" min-width="auto;" align="center" label="理布票用量(KG)" >

                    <template #default="scope">

                      <el-input @keyup="show($event,scope.$index)"    class="table_input focusB_input" v-model="scope.row.ticketAmount" >

                          <template #append>

                              <div style="color:red;line-height: 24px">*</div>

                          </template>

                      </el-input>

                    </template>

                  </el-table-column>

                  <el-table-column className="mycell" min-width="auto;" align="center" label="价格" >

                    <template #default="scope">

                      <el-input   @keyup="show($event,scope.$index)" class="table_input focusY_input" v-model="scope.row.price" >

                          <template #append>

                              <div style="color:red;line-height: 24px">*</div>

                          </template>

                      </el-input>

                    </template>

                  </el-table-column>

2. 方法实现

show(ev,index){

                let newIndex ;

                //通过ev 获取 当前input 名称 用于判断属于哪列

                let clssName = ev.target.offsetParent.className;

                //每一列

                if(clssName.indexOf('normalB_input') != -1){

                    newIndex = index*4 ;//要操作几行就*几行

                } else if (clssName.indexOf('normalY_input') != -1) {

                    newIndex = index*4 + 1 ;

                } else if (clssName.indexOf('focusB_input') != -1) {

                    newIndex = index*4 + 2;

                } else if (clssName.indexOf('focusY_input') != -1) {

                    newIndex = index*4 + 3;

                }

                let inputAll = document.querySelectorAll('.table_input input');

                //向上 =38

                if(ev.keyCode == 38){

                    //console.log("上");

                    //当焦点在第一行的时候 按向上的时候焦点要聚焦到前一列的最后一个

                    if(newIndex >=1 && newIndex<=3){

                        newIndex = newIndex + 47;

                    } else {

                        newIndex -= 4 ;

                    }

                    if( inputAll[newIndex] ){

                        inputAll[newIndex].focus();

                    }

                }

                //下 = 40

                if(ev.keyCode == 40){

                    //console.log("下");

                    //当newIndex 在最后一行的时候 焦点要聚焦到 下一列的第一个

                    newIndex += 4 ;

                    if(newIndex>=inputAll.length){

                        this.add();//我们项目需求是按下键的时候会新增行

                    }

                    if( inputAll[newIndex] ){

                        inputAll[newIndex].focus();

                    }

                }

                //左 = 37

                if(ev.keyCode == 37){

                    //console.log("左");

                    newIndex -= 1 ;

                    if( inputAll[newIndex] ){

                        inputAll[newIndex].focus();

                    }

                }

                //右 = 39

                if(ev.keyCode == 39){

                    //console.log("右");

                    newIndex += 1 ;

                    if( inputAll[newIndex] ){

                        inputAll[newIndex].focus();

                    }

                }

            },

前端通过input 输入框实现动态添加行 , 键盘上下左右点击可同步操作中心位置的相关教程结束。