antd ProForm批量设置表单值

samscat

已于 2024-09-11 15:41:45 修改

阅读量271

点赞数 3

文章标签： javascript react.js 前端

于 2024-09-04 18:09:21 首次发布

本文链接：https://blog.csdn.net/samscat/article/details/141900345

版权

import { Button, Col, Form, message, Row } from 'antd';
...
const [form] = Form.useForm();
const actionRef = useRef(null);
...
return (
...
...
<ProForm form={form} onFinish={handleFinish} style={{ margin: '0 10px' }} submitter={false}>
	<ProFormList
	 name="arrangePeopleDtoList"
	 label=""
	 actionRef={actionRef}
	 deleteIconProps={{
	   Icon: CloseCircleOutlined,
	   tooltipText: '删除'
	 }}
	 creatorButtonProps={{ hidden: true  }} // 隐藏form自带的提交按钮
	>
	 <ProFormGroup key="group">
	   <Row gutter={6}>
	     <Col span={6}>
	       <ProFormSelect
	         label="科室"
	         name="belongDeptId"
	         style={{ width: '120px' }}
	         {...XTableValueType.Department}
	         rules={[{ required: true, message: '请选择科室' }]}
	         onChange={(data, option) => {
	           const { arrangePeopleDtoList = [] } = form.getFieldsValue();
               const updatedArrangePeopleDtoList = arrangePeopleDtoList.map(item => {
                  if (item.belongDeptId === data) {
                    return { ...item, belongDeptName: option[0] };
                  }
                  return item;
                });
            
                form.setFieldsValue({
                  arrangePeopleDtoList: updatedArrangePeopleDtoList
                });
	         }}
	       ></ProFormSelect>
	     </Col>
      ...