描述

标题写得不是很明白，结合以下的效果图，在这里描述一下这个功能，当在input框中输入数字几，下面就会产生多少条数据（这里输入数字2，下面产生两条数据，下图中的每一行为 一条数据）。

实现的思路

1、在input框中绑定回车事件和得焦事件，并且使用v-model绑定一个变量PepNumber，该变量用于绑定input框中输入的值；
2、将下面的每一条数据定义为对象obj；
3、定义一个变量PepoleNumber，该变量为数组类型；
4、在每一条数据的最外层div中绑定定义的那个数组类型的变量；
5、在input框中输入值了以后，按回车，触发回车事件，在回车事件中，通过循环PepNumber，将对象obj,push到数组PepoleNumber中；
6、当input框再次得到焦点的时候，触发得焦事件，在该事件中，将数组PepoleNumber清空；

问题：这里存在一个小缺点，只有在input框中输入值后，按回车后，然后失焦，然后在得焦，才能将PepoleNumber数组清空，如果输入值后，也按了回车，此时并没有失焦，再次输入数值，然后在按回车，就会在原先得数组中追加一条数据，不会清空数组原先的数组

代码部分

html部分

<div class="Add_people">
          <!-- 标题 -->
          <div class="Add_people_title">
            <span style="margin-left:27px;">姓名:</span>
            <span style="margin-left:138px;">性别:</span>
            <span style="margin-left:142px;">与填报人关系:</span>
            <span style="margin-left:72px;">公民身份证:</span>
            <span style="margin-left:236px;">出生日期:</span>
          </div>
          <!-- 内容 -->
          <div  v-for="(item,index) in PepoleNumber" :key="index" >
            <el-form  :model="item.fifteenYearsOldArr"  :ref="'fifteenYearsOldArr'+ index" label-width="28px">
              <div  style="display:flex;">
                <el-form-item>
                  <el-input class="add_people_value" v-model="item.hrmEmployeeName "  placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item >
                  <el-select class="add_people_value"  v-model="item.hrmEmployeeSex"  placeholder="请输入人数">
                    <el-option v-for="(item,index) in item.hrmEmployeeSexdata" :key="index" :label="item.value" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-select class="add_people_value"  v-model="item.relationship "    placeholder="请输入人数">
                    <el-option v-for="(item,index) in item.hrmEmployeerelationshipdata" :key="index" :label="item.value" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-input   class="add_people_value " style="width:300px;"  v-model="item.hrmEmployeeIdentitycard "  placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item >
                  <el-col :span="22" >
                    <el-date-picker  class="add_people_value " value-format="yyyy-MM-dd"  v-model="item.hrmEmployeeBirthday " type="date" placeholder="请选择"   style="width: 100%;"></el-date-picker>
                  </el-col>
                </el-form-item>
              </div>

            </el-form>
          </div>
        </div>

js逻辑部分

 // 得焦事件
    focustext(){
      this.PepoleNumber = []
    },
    // 回车事件
    searchAllCompany(){
      console.log('回车事件')
      let Number = this.PepNumber
      for(let i = 0 ;i<Number;i++){
      console.log('wwwwww')
      console.log(i)
      let obj ={
          hrmEmployeeName:'',
          hrmEmployeeSex:'',
          index:'',
          relationship:'',
          hrmEmployeeIdentitycard:'',
          hrmEmployeeBirthday:'',
          hrmEmployeeSexdata:[
            {
              id:'1',
              value:'男'
            },
            {
              id:'2',
              value:'女'
            }
          ],
          hrmEmployeerelationshipdata:[
            {
              id:'1',
              value:'子女'
            },
            {
              id:'2',
              value:'亲友'
            }

          ]
        }
        obj.index = i
      this.PepoleNumber.push(obj)
    }
    // this.PepoleNumber = []
    },