vue+element 实现批量新增多行

实现如下批量新增

1. 样式

 <div v-for = "(item, index) in form.list" :key = "index">
     <el-form-item  label = "选项" 
           :rules = "{required:true, message:'请输入', trigger: ''change}"
           :prop = " 'list.' + index + '.name' ">
         <el-input type= 'test' v-model = "item.name"
                 placeholder = "请输入"  clearable>
         </el-input>
     </el-form-item>
     <el-form-item>
          <el-button v-if = "index+q = form.list.length"
            type = "primary"  icon = " el-icon-plus" @click = "addRow">
          </el-button>
         <el-button v-if = "index !== 0" type = "primary"
            icon = " el-icon-minus" @click = "delRow(item, index)">
         </el-button>
     </el-form-item>
 </div>

2. 参数声明

 form: {
   list:[{id:'',name:''}]
   }

3. js方法
   // 新增一行

   addRow(){
      if(this.form.list){
         var index = this.form.list.length - 1;
         var lastItem = JSON.parse(JSON.stringify(this.form.list[index]))
         lastItem.id = ''
         lastItem.name = ''
         this.form,list.push(lastItem)
        }
   }
 

// 删除一行

  delRow(item, index){
      this.form.list.splice(index, 1)
   }