vue+element-ui Form表单验证循环

之前一直在写小程序,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值

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值