element动态添加多条input框来添加数据

elementUI进行写的

<el-dialog title="添加"
                           :visible.sync="addlistVisible"
                           width="920px"
                           :before-close="handleClose2">
                    <div>
                        <el-form :model="form">
                        //这条数据框 使用的是el-select 模糊搜索  上篇文章有介绍，刚点开弹框默认显示的一条
                            <div>
                                <el-form-item :label-width="formLabelWidth">
                                    <el-select v-model="form.addschool"
                                               filterable
                                               remote
                                               style="width:230px;"
                                               reserve-keyword
                                               placeholder="请输入关键词"
                                               :remote-method="remoteMethod2"
                                               :loading="loading"
                                               @focus="repeatList"
                                               clearable="true"
                                               @change="handleSelectBranchCom2">
                                        <el-option v-for="item in addschoolname"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item">
                                        </el-option>
                                    </el-select>
                                    <el-input style="width:180px" v-model="form.addzy" placeholder="请输入专业" autocomplete="off"></el-input>
                                    <el-input style="width:150px" v-model="form.addnumber" placeholder="请输入安置人数" autocomplete="off"></el-input>
                                    <el-date-picker v-model="form.addazdate"
                                                    type="month"
                                                    placeholder="选择安置日期"
                                                    format="yyyy 年 MM 月"
                                                    value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
						// 这里 是动态循环添加的input框，可自行更改
                            <div v-for="(ddd,index) in counter">
                                <el-form-item :label-width="formLabelWidth">
                                    <el-input style="width:230px" v-model="addequallyname" :disabled="true" placeholder="请输入学校" autocomplete="off"></el-input>
                                    <!--这里v-model绑定要 ddd.zyname   才能确保动态添加的所绑定的数值不一样-->
                                    
                                    <el-input style="width:180px" v-model="ddd.zyName" placeholder="请输入专业" autocomplete="off"></el-input>
                                    <el-input style="width:150px" v-model="ddd.azCount" placeholder="请输入安置人数" autocomplete="off"></el-input>
                                    <el-date-picker v-model="ddd.azDate"
                                                    type="month"
                                                    placeholder="选择安置日期"
                                                    format="yyyy 年 MM 月"
                                                    value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </div>
                            <div class="ujm">
                                <el-button class="addstyle" type="info" @click="addinput">新增信息</el-button>
                            </div>

                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <!--<el-button @click="addkkk">看一下数据</el-button>-->
                        <el-button @click="addlistVisible = false">取 消</el-button>
                        <el-button type="primary" @click="determineadd">确 定</el-button>
                    </span>
                </el-dialog>

 data: function () {
                return {
                	//添加要循环的为空
						counter:[],
					}

写方法
methods：{

		//现在是动态创建input里所需要的值，既然是添加多条 就是要push添加对象
		 addinput() {
                    this.counter.push({ 'zyName': '', 'azCount': '', 'azDate': '' })
                },
		
		//这里要进行提交 往接口提交
		determineadd() {
                    var that = this;
                    //这里打印的都是 默认第一条里所添加的数据
                    console.log(that.searchid2)
                    console.log(that.form.addzy)
                    console.log(that.form.addazdate)
                    console.log(that.form.addnumber)

                    //这个要看你们后端需要添加的数据的格式   我们后台是要一个id值   然后多条对象
				我们后端要这种格式
				{
                    "uid":228490,
                    "data":[
                
                       {
                           "zyName":"Web开发",
                           "azCount":50,
                          "azDate":"2020-12"
                       },
                       {
                           "zyName":".Net开发",
                           "azCount":50,
                            "azDate":"2020-12"
                        }
                   ]
                }

上面这段要删除掉

                    var ui = {
                        uid: this.searchid2,
                        data: [
                            {
                                zyName: that.form.addzy,
                                azCount: that.form.addnumber,
                                azDate: that.form.addazdate,
                            }]
                    }
                    
                    //这里要进行一个数组合并   把默认显示的input的数据 与动态添加的 进行合并
                    console.log( ui.data.push.apply(ui.data, that.counter) )
                    axios.get('   数据接口 ', {
                        params: {
                        //  参数 传送给后端
                            paras: ui
                        }
                    })
                        .then(function (res) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            console.log(res);
                            //这里是进行   添加成功后  要把刚才输入的数值清空
                            that.form.addschool = '';
                            that.addequallyname = '';
                            that.searchid2 = '';
                            that.form.addzy = '';
                            that.form.addazdate = '';
                            that.form.addnumber = '';
                            //  也要把动态添加的input给清空
                            that.counter = [];
                            that.addlistVisible = false;
                            //然后在调取一下数据列表
                            that.getlist();



                        })
                        .catch(function (err) {
                            console.log(err)
                        });


                },


}

感觉写的算是详细的了，请自行修改