前端通过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();

                    }
                }

            },