动态添加表单数据vue_vue表单新增数据放入list

一、第一种
  <el-row>
        <el-col :span="18">
        <el-form-item label="研究方向" 
        :prop="'list.'+index+'.name'"
        :rules="{required:true,message:'研究方向不能为空',trigger:'blur'}">
        <el-input v-model="item.name" placeholder="请输入研究方向" />
        </el-form-item>
        </el-col>
         <el-col :span="6" >
         <el-button style="margin-left:5px" v-if="index+1==form.list.length" type="primary" @click="addItem">增加</el-button>
        <el-button style="margin-left:5px" v-if="index !==0" type="danger" @click="deleteItem(item,index)">删除</el-button>
        </el-col>
    </el-row>

第二种、
    <div v-for="(item, index) in form.list" :key="index">
    <el-row>
        <el-col :span="18">
        <el-form-item label="研究方向" 
        :prop="'list.'+index+'.name'"
        :rules="{required:true,message:'研究方向不能为空',trigger:'blur'}">
        <el-input v-model="item.name" placeholder="请输入研究方向" />
        </el-form-item>
        </el-col>
         <el-col :span="6" >
         <el-button style="margin-left:5px"  type="primary" @click="addItem">增加</el-button>
        <el-button style="margin-left:5px" v-if="form.list.length>1" type="danger" @click="deleteItem(item,index)">删除</el-button>
        </el-col>
    </el-row>
        </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

form:{
  list:[
           {
            name:""
           }
       ]
       }
1
2
3
4
5
6
7

data数据里加上

 form: {
        id:"",
        audit:"",
        zw:"",
        list:[
            {name:""}
        ]
      },
1
2
3
4
5
6
7
8

增加按钮方法addItem

    addItem() {
       var obj={name:""}
    this.form.list.push(JSON.parse(JSON.stringify(obj)))
    },

    第二种、
addItem() {
    this.form.list.push({
        name: "",
      });
    },
1
2
3
4
5
6
7
8
9
10
11

删除方法

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