注:EditableProTable默认是在单行保存时调用表单验证,如下图:

现在项目有个需求:是点击EditableProTable外部的保存按钮对整个表单进行验证,实现效果如下:

思路如下:
EditableProTable提供了editable属性,可以设置form属性:官网地址

实现代码如下,复制可直接运行):
import React, { useState, } from 'react';
import { FooterToolbar, } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import { Button, Row, Col, Form, message, } from 'antd';
import ProForm, {

本文介绍如何在Ant-Design-Pro项目中,使用EditableProTable组件并结合ProForm,实现在点击外部保存按钮时全局验证表单内所有数据的规则,确保数据合规。通过设置EditableProTable的editable属性,并传入form属性,可以达到预期效果。
最低0.47元/天 解锁文章
1033

被折叠的 条评论
为什么被折叠?



