Dans le projet vue, entrez un nombre dans la zone de saisie et ajoutez le nombre d'objets correspondant au numéro au tableau

décrire

Le titre n'est pas très clair. Combiné avec les rendus suivants, décrivez cette fonction ici. Lorsque vous entrez un nombre dans la zone de saisie, combien de données seront générées ci-dessous (entrez le nombre 2 ici, et deux données seront être généré ci-dessous, comme le montre la figure ci-dessous (chaque ligne dans une donnée).

Idée de réalisation

1. Liez l'événement enter et l'événement focus dans la zone de saisie, et utilisez v-model pour lier une variable PepNumber, qui est utilisée pour lier la valeur saisie dans la zone de saisie. 2. Définissez chaque élément de données ci-dessous comme Object obj
.
3. Définissez une variable PepoleNumber, qui est un type de tableau ;
4. Liez la variable de type tableau définie dans le div le plus externe de chaque élément de données ;
5. Après avoir entré la valeur dans la zone de saisie, appuyez sur Entrée pour déclencher l'événement Entrée. . Dans l'événement Enter, l'objet obj est poussé vers le tableau PepoleNumber en bouclant PepNumber ;
​​6. Lorsque la zone de saisie obtient à nouveau le focus, l'événement Focus est déclenché. Dans cet événement, le tableau PepoleNumber est effacé ;

Problème : Il y a un petit inconvénient ici. Ce n'est qu'après avoir entré une valeur dans la zone de saisie, appuyez sur Entrée, puis perdez le focus, puis obtenez le focus, que le tableau PepoleNumber peut être effacé. Si vous entrez une valeur et appuyez sur Entrée, à ce moment-là temps Il n'est pas flou, entrez à nouveau la valeur, puis appuyez sur Entrée, une donnée sera ajoutée au tableau d'origine et le tableau d'origine du tableau ne sera pas effacé

partie du code

partie 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>

partie logique 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 = []
    },