antdv 1.x 实现form+table校验

实现antd的table校验,html如下,用form包裹着table,绑定相应的数据。要实现验证需要吧每个列的内容用挖槽挖出来,并用a-form-model-item包裹起来,同时绑定上相应的prop值和rules值(校验必须),通过prop来记录当前绑定的行,rules为当前列的校验规则(校验必须)。

绑定的数据如下:

这是所有的方法,通过rules的key获取校验项所需要的key字段,进行非空校验通过field字段获取prop传过来的下标,拿到当前项的值来进行校验。通过getFormTableProp方法获取当前表格所有的prop, 提交校验的时候通过antd中form组件的validateField方法,通过传入一个校验字段的数组进行校验,通过promise来实现校验成功失败的回调。通过form组件的clearValidate方法来实现重置校验。如果是设计成可编辑操作的表格,右边浮动的情况可能会导致表格高度对应不上。通过fixedTable方法,获取表格行的高度,通过匹配当前行与当前行的浮动行高度,设置为相同高度既可以解决, 编辑情况可以将这个动态设置等高的方法放在watch监听里来解决问题。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值