之前一直在写小程序,vue全都忘没了。害。。。。
步入正题,今日问题:
vue+element-ui Form表单循环+表单验证
我想着简化一下代码,因为全部都是input表单。
要的效果图就是这样的。所以最开始就应该给el-form-item加一个v-for循环。但是问题出现了input的v-model如果写进ruleForm中,则就无法动态赋值
官方的验证信息是这样的。所以如果我input的v-model给一个ruleForm下的属性显然是行不通的。所以我只能将input的v-model写进循环的数组中,但是写进数组中。
接下来就是验证表单
最开始我将rules属性放在el-form中,所以循环的话我将rules放在el-form-item下,所以我的数组中要加入一个rules的验证。但是问题来了,我的prop还是在单独定义的
就是这样的,但是我rules下的验证属性都是value对不上号。我上网查了好多,有arr.${index}.name(name是input中的v-model的属性),但是根本行不通,还报错。所以这个方向将我误导了,我以为这个属性应该是input中的v-model的属性。但是我错了。这个prop的本质应该与rules中的验证名相对应。所以
直接将prop改成value就好了啊
代码附上
万元
<el-form-item>
<div class="end-button">
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm">返回</el-button>
</div>
</el-form-item>
</el-form>
js
ruleForm: {
inputList:[
{
label:“年度”,
prop:“year”,
id:0,
append:false,
value:"",
placeholder:“请输入年度”,
rules:{
value: [
{ required: true, message: ‘请输入年度信息’, trigger: ‘blur’ },
],
}
},
{
label:“销售收入”,
prop:“sales”,
id:1,
append:true,
value:"",
placeholder:“请输入销售收入”,
rules:{
value: [
{ required: true, message: ‘请输入销售收入’, trigger: ‘blur’ },
],
}
},
{
label:“营业收入”,
prop:“business”,
id:2,
append:true,
value:"",
placeholder:“请输入营业收入”,
rules:{
value: [
{ required: true, message: ‘请输入营业收入’, trigger: ‘blur’ },
],
}
},
{
label:“净资产”,
prop:“assets”,
id:3,
append:true,
value:"",
placeholder:“请输入净资产”,
rules:{
value: [
{ required: true, message: ‘请输入净资产’, trigger: ‘blur’ },
],
}
}
],
},
续更:
我发现我的prop没给变量,我提交验证通过不了所以,更改
变成每个列表的value值