vue+element 实现批量新增多行_vue怎么表单数据批量增加

实现如下批量新增

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. 参数声明

 form: {
   list:[{id:'',name:''}]
   }
1
2
3

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)
        }
   }
 
1
2
3
4
5
6
7
8
9
10

// 删除一行

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