vue + element 实现表格表单，使用扫描枪录入数据

一、项目需求

需求是使用扫码枪录入序列号，自动跳转下一个输入框。本案例实现了动态表头，手动输入点击回车会自动跳转下一个、扫码枪录入会自动跳转下一个，该换行时会自动新增一行。

实现效果如下：

二、功能实现

1. 表格编辑功能

<el-table-column label="姓名"  align="center" >
     <template slot-scope="scope">
        <el-input placeholder="请输入姓名"  v-model="scope.row.name"  style="width: 100%" size="mini"  />
     </template>
</el-table-column>

2. 回车跳转下个输入框。 给输入框绑定回车事件@keydown.enter.native，并指定输入框获得焦点，如需获取指定节点输入框，在输入框上添加ref属性，以便获取该节点。

<el-table-column label="姓名"  align="center" >
     <template slot-scope="scope">
        <el-input placeholder="请输入姓名"  ref="name"  v-model="scope.row.name"  style="width: 100%" size="mini"
        @keydown.enter.native="nextFocus" />
     </template>
</el-table-column>
<el-table-column label="年龄"  align="center" >
     <template slot-scope="scope">
        <el-input placeholder="请输入年龄" ref="age"  v-model="scope.row.age"  style="width: 100%" size="mini"  />
     </template>
</el-table-column>

   
  
js部分：
   nextFocus() {
        this.$refs["age"].focus();
   }

3. 动态表头绑定输入框。

//重点：scope.column.property可获取当前列的设置的prop值，用于区分当前绑定值。
//这时ref的值相同,this.$refs["rowIndex"] 会是一个数组，包含所有的节点。
//this.$refs["rowIndex"][i] 需要第几个 “i” 就写几
<el-table-column :label="item.titleName" :prop="'title' + i" align="center" v-for="(item, i) in headData"
            :key="i">
    <template slot-scope="scope">
         <el-input :placeholder="item.titleName" ref="rowIndex" v-model="scope.row[scope.column.property]"
                style="width: 100%" size="mini" @keydown.enter.native="nextFocus(i + 1, scope.$index)" />
    </template>
</el-table-column>



data(){
	return{
		headData:[
		{
			titleName:"姓名",
			id:1
		},
		{
			titleName:"年龄",
			id:2
		},
		]
	}
}

4. 实现新增和跳转

  <el-form ref="form" :model="form">
       <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
                <el-button size="mini" type="primary" icon="el-icon-plus" plain @click="addRow">
                    新增行
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button size="mini" type="primary" @click="submitForm">
                    保存
                </el-button>
            </el-col>
        </el-row>
        <el-table :data="form.attrList" ref="newData" border tooltip-effect="dark"
                :header-cell-style="{ background: '#f5f7fa', color: '#333' }" size="small">
             <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
             <el-table-column :label="item.titleName" :prop="'title' + i" align="center"
                  v-for="(item, i) in headData" :key="i">
                  <template slot-scope="scope">
                    <el-input :placeholder="item.titleName" ref="rowIndex" v-model="scope.row[scope.column.property]"
                      style="width: 100%" size="mini" @keydown.enter.native="nextFocus(i + 1, scope.$index)" />
                  </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="60">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-delete" size="mini"
                      @click="delNewData(scope.row, scope.$index)"></el-button>
                  </template>
              </el-table-column>
         </el-table>
   </el-form>

data(){
	return{
		form:{
		},
		//总数
		allNum:0,
		//行号
		rowIndex:0,
		//输入框列数
		attrIndex:2,
		delArr:[],
		//动态表头数据
		headData:[
		{
			titleName:"姓名",
			id:1
		},
		{
			titleName:"年龄",
			id:2
		},
		]
	}
},
methods:{
	//新增行
	addRow(){
	    let query={
	        index:this.rowIndex
		} 
		//不存在attrList   新增该属性并新增一行
		if(!this.form.attrList){
			this.$set(this.form, "attrList", [query]);
		}else{
			this.form.attrList.push(query);
		}
		//页面加载完成后再获取焦点
		this.$nextTick(() => {
            // console.log(this.$refs["rowIndex"]);
	        this.$refs["rowIndex"][this.allNum].focus();
	        this.rowIndex++
	        this.allNum = this.attrIndex * this.rowIndex
        })
	},
	//跳转
	nextFocus(index,row){
		if ((row + 1) * this.attrIndex < this.allNum && this.allNum != 0) {
	        let val = this.attrIndex * row + index
	        this.$refs["rowIndex"][val].focus();
	    } else {
	        // console.log(index % this.attrIndex);
	        //最后一个输入框跳转新增一行
	        if (index % this.attrIndex == 0) {
	
	          this.addRow()
	
	        } else {
	          
	          let val = this.attrIndex * (this.rowIndex - 1) + index
	          this.$nextTick(() => {
	            
	            this.$refs["rowIndex"][val].focus();
	          })

        }
	},
	//保存
	submitForm(){
		console.log(this.form.attrList)
		//处理数据
		...
	},
	//删除行
	delNewData(row,index){
		this.delArr.push(row.index);
        this.form.attrList.splice(index, 1);
        this.rowIndex--
        this.allNum = this.attrIndex * this.rowIndex
	}
}

三、总结

该功能最重要部分是动态表头与输入框的绑定关系，还有输入框的跳转问题（很容易跳窜行）。
欢迎大家来点赞评论收藏！！！！
转载请注明地址！！！！