|
注：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, { ProFormText, } from '@ant-design/pro-form';
import type { ProColumns, } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table'
const EditableProTableDemo: React.FC = () => {
const [editForm] = Form.useForm();
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
const [dataSource, setDataSource] = useState<any>([]);
const columns: ProColumns[] = [
{
title: '类型',
dataIndex: 'type',
align: 'center',
valueType: 'select',
valueEnum: {
1: { text: '类型A', },
2: { text: '类型B', },
},
formItemProps: {
rules: [
{ required: true, message: '请选择类型' },
],
},
fieldProps: {
allowClear: false,
},
},
{
title: '名称',
dataIndex: 'name',
formItemProps: {
rules: [
{ required: true, message: '请输入名称' },
{ max: 10, message: '最长10个字段', },
],
},
}
];
return (
<ProForm
onFinish={
async (values) => {
console.log(values);
}
}
initialValues={{}}
submitter={
{
render: (props, dom) =>
<FooterToolbar>
<Button
key='save'
onClick={async () => {
// 调用表单验证
try {
await editForm.validateFields().then(() => {
props.form?.submit?.();
});
} catch (err) {
message.info('请正确填写可编辑表格信息 ）：');
}
}}
>
保存
</Button>
</FooterToolbar>
}
}
>
<ProCard
className='card'
headerBordered
title='普通Form信息'
>
<Row gutter={24} >
<Col span={12} xs={24} sm={24} md={12} lg={12} xl={12} xxl={12}>
<ProFormText
name='name_full'
label='全称'
rules={[{ required: true, message: '请输入全称' },]}
fieldProps={
{
placeholder: '请输入全称',
maxLength: 20,
}
}
/>
</Col>
</Row>
</ProCard>
<ProCard
className='card'
headerBordered
title='EditableProTable可编辑表格信息'
>
<EditableProTable
columns={columns}
rowKey='id'
value={dataSource}
recordCreatorProps={{
newRecordType: 'dataSource',
record: () => ({
id: Date.now(),
}),
}}
editable={{
type: 'multiple',
form: editForm,
editableKeys,
actionRender: (row, config, defaultDoms) => {
return [defaultDoms.delete]
},
onValuesChange: (record, recordList) => {
setDataSource(recordList);
},
onChange: (editableKeyss, editableRows) => {
setEditableRowKeys(editableKeyss);
setDataSource(editableRows);
},
}}
bordered={true}
/>
</ProCard>
</ProForm>
);
};
export default EditableProTableDemo;
关键代码段有如下几个：
const [editForm] = Form.useForm();
form: editForm,
onClick={async () => {
// 调用表单验证
try {
await editForm.validateFields().then(() => {
props.form?.submit?.();
});
} catch (err) {
message.info('请正确填写可编辑表格信息 ）：');
}
}}
完结撒花~~~ | 
转播
