antd-vue-formModel如何写多层循环数据,如何自定义校验规则

一般的数据提交处理我们会用form组件,但是碰上数据复杂的,建议用formModel。更方便自己定义一些规则以及一些复杂的处理,本文以formModel为例来写多层循环校验(form也是一样用法,细节不同处参照官网)。
其实官网里面也有多层循环数据以及如何校验多层循环的表单实例(其实参照官网写就可以了,这里只是多了些注释)。
参照动态增减表单:
在这里插入图片描述
先来说多层循环数据。要实现以下功能:(点击添加条款、递增率、优惠、其它条款,上面对应的条款就要增加一条,并进行相应的必填校验,开始时间小于结束时间校验,月份不能大于数字12校验等其他自己想要的校验都是同一种方法去写的)
在这里插入图片描述
首先进行数据分析,一般这种添加多条的数据都是数组。我们可以通过数组的push方法来实现数据的累加。具体的数据结构代码如下(只写了条款和递增率两种形式的,其他的都是和这两个一样的)
在这里插入图片描述
这两块的页面结构如下:(只展示了条款的结构代码,递增率的是一样的)
在这里插入图片描述

添加操作:
在这里插入图片描述
校验开始时间:(写在mothods中,结束时间同样要进行校验,这是双向的。结束时间的校验以下写法一致,但是比较条件要改变下,要拿到对应位置的开始时间)
在这里插入图片描述
校验月份:(没写必填校验,因为在dom中已经写了,这里的参数rule会把写过的校验带过来)
在这里插入图片描述
大致效果:
在这里插入图片描述

  • 8
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值