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)
});
},
}感觉写的算是详细的了，请自行修改