描述

标题写得不是很明白,结合以下的效果图,在这里描述一下这个功能,当在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 = []
    },
Logo

前往低代码交流专区

更多推荐