本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
这里针对点击按钮增删一排输入框的问题做一个总结。效果图如下：
存在一排必填的内容，点击新增行后会新增一行，点击每行后面的删除按钮则会删除该行
考虑的实现方式是，先写死一个必须的表单，需要新增表单的放在一个div里，在div中使用v-for生成，达到同时增加的效果。
动态表单部分
<div class="left_Box">
<div class="btnTool" style="text-align:right;">
<el-button type="primary" size="mini"@click="addDomain">新增行</el-button>
<el-button type="primary" size="mini"@click="clear_btn('dynamicValidateForm')">清空</el-button>
<el-button type="primary" size="mini"@click="submitForm('dynamicValidateForm')">存为模板</el-button>
</div>
<div>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" :inline="true" class="demo_dynamic">
<div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="dv_hang" >
<el-form-item
:key="domain.key"
:prop="'domains.' + index + '.lx'"
:rules="{
required: true, message: '不能为空', trigger: 'blur',
}"
>
<label>状态符</label>
<el-select v-model="domain.lx" size="small">
<el-option label="计划停运" value="PO"></el-option>
<el-option label="非计划停运" value="UO"></el-option>
<el-option label="第一类非计划停运" value="UO1"></el-option>
<el-option label="第二类非计划停运" value="UO2"></el-option>
<el-option label="第三类非计划停运" value="UO3"></el-option>
<el-option label="第四类非计划停运" value="UO4"></el-option>
</el-select>
</el-form-item>
<el-form-item
:key="domain.key1"
:prop="'domains.' + index + '.qsfw'"
:rules="{
required: true, message: '不能为空', trigger: 'blur',
}"
>
<label>时间范围</label>
<el-input-number v-model="domain.qsfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
<!-- <el-input v-model="domain.qsfw" size="small"></el-input> -->
</el-form-item>
<el-form-item
:key="domain.key2"
:prop="'domains.' + index + '.zzfw'"
:rules="{
required: true, message: '不能为空', trigger: 'blur',
}"
>
<label>至 </label>
<el-input-number v-model="domain.zzfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
<!-- <el-input v-model="domain.zzfw" size="small"></el-input> -->
</el-form-item>
<el-form-item
:key="domain.key3"
:prop="'domains.' + index + '.zsxs'"
:rules="{
required: true, message: '不能为空', trigger: 'blur',
}"
>
<label>折算比例</label>
<el-input-number v-model="domain.zsxs" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
<!-- <el-input v-model="domain.zsxs" size="small"></el-input> -->
<el-button @click.prevent="removeDomain(domain)" size="small" class="delhang_class">删除行</el-button>
</el-form-item>
</div>
</el-form>
</div>
</div>
data定义部分
export default {
name: 'dynamicForm',
data () {
return {
dynamicValidateForm: {
domains: [{
lx:'',//状态符
qsfw:'',//起始范围
zzfw:'',//截止范围
zsxs:'',//折算比例
}],
},
}
}
}
在methods里增加的方法
methods: {
removeDomain(item) {//删除行
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {//新增行
this.dynamicValidateForm.domains.push({
lx:'',//状态符
qsfw:'',//起始范围
zzfw:'',//截止范围
zsxs:'',//折算比例
key: Date.now()
});
},
submitForm(formName) {//保存按钮
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.dynamicValidateForm.domains)
this.savemoban(this.dynamicValidateForm.domains)
} else {
console.log('error submit!!');
return false;
}
});
},
clear_btn(formName) {
this.$refs[formName].resetFields();
},
savemoban(domainsdata){//存为模板
let params = {
zsgs:domainsdata,
};
this.servicept
.post("/sbdZhzbFx/saveCaclueFormula", params)
.then((res) => {
if(res.data.msg=="成功"){
this.$message.success("成功！");
}else{
this.$message.error("失败！");
}
}).catch((res) => {
});
},
},
需要注意的一点：
普通表单验证单项依靠的是prop而动态生成的表单要用:prop
书写的语法是:prop="'domain.' + index +'.lx'"，domain是v-for绑定的数组，index是索引，lx是表单绑定的v-model的名称，然后用.把他们链接起来。
所以总结起来的语法就是:prop="'v-for绑定的数组.' + index + '.v-model绑定的变量'"
具体效果可以直接复制代码到本地看，需要什么表单可以自己加哦根据自己的业务需求💕💕~
谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕
评论抽奖
欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边
-
抽奖礼物：100份，掘金官方提供，包括掘金徽章、拖鞋、马克杯、帆布袋等，随机发放
-
抽奖时间：「掘力星计划」活动结束后，预计3个工作日内，官方将在所有符合规则的活动文章评论区抽出
-
抽奖方式：掘金官方随机抽奖+人工核实
-
评论内容：与文章内容相关的评论、建议、讨论等，「踩踩」「学习了」等泛泛类的评论无法获奖
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
