动态添加多个 表单项 如下图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021062914205335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlMjMzMw==,size_16,color_FFFFFF,t_70)
html:
<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" label-position="right" label-width='100px'>
<el-row>
<el-col :span="6">
<el-form-item v-for="(item,index) in this.lis1" :label="'预留位号:' +index" :key="index">
<el-input v-model="item.presettingNo" placeholder="预留位置" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')">
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-for="(item,index) in this.lis2" :label="'拍照时:' + index" :key="item.key" label-width='80px'>
<el-input v-model="item.hour" placeholder="拍照时" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item v-for="(item,index) in this.lis3" :label="'拍照分:' +index" :key="index" label-width='70px'>
<el-input v-model="item.minute" placeholder="拍照分" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"></el-input>
<el-button type="primary" icon="el-icon-minus" size="mini" @click.prevent="removeDomain(item)" style="margin-left:15px"></el-button>
</el-form-item>
</el-col>
</el-row>
<el-button type="primary" icon="el-icon-plus" size="mini" style="margin-left:2.5%;" @click="addDomain"></el-button>
</el-form>
数据初始化:
lis1: [
{
presettingNo: 255,
},
],
lis2: [
{
hour: 0,
},
],
lis3: [
{
minute: 0,
},
],
js 部分:
//删除
removeDomain(item) {
var index = this.lis3.indexOf(item)
if (index !== -1) {
this.lis1.splice(index, 1)
this.lis2.splice(index, 1)
this.lis3.splice(index, 1)
this.$forceUpdate()
}
},
// 添加按钮
addDomain() {
this.lis1.push({
presettingNo: 255,
key: Date.now(),
})
this.lis2.push({
hour: 0,
key: Date.now(),
})
this.lis3.push({
minute: 0,
key: Date.now(),
})
this.$forceUpdate()
},
解决输入框数据更新视图无反应问题
this.$forceUpdate()