【vue】表单动态添加数据

如何做一个如图的表单动态添加数据？

1、首先在return中定义一个数组，存放添加的数据

data() {
            return {
                stuList: [] //学生数组
            }
        },

2、点击新增按钮，则会在数组中添加一个学生对象，点击删除则会删除最后一行，所以需要写两个点击事件来控制。

 <el-button @click="addStu">新增一列el-button>
 <el-button @click="subStu">删除el-button>

用数组的push与splice方法

 methods: {
            addStu(){  //新增一列
                this.stuList.push( {
                    "stuName":"",
                    "stuAge":"",
                    "stuSex":"",
                })
            },
            subStu(){ //删除最后一列
                this.stuList.splice(this.stuList.length-1,1)
            }
        }

3、最后将数据显示在页面中
用v-for循环遍历stuList数组，v-model进行数据的双向绑定，就能实现啦

<el-form-item
         v-for="(stu,id) in stuList"
         :key="id">
    <el-input v-model="stu.stuName" placeholder="姓名">el-input>
    <el-input type="number" v-model="stu.stuAge" placeholder="年龄">el-input>
    <el-select v-model="stu.stuSex" placeholder="性别">
        <el-option label="男" value="1">el-option>
        <el-option label="女" value="2">el-option>
    el-select>
el-form-item>