antd ProForm动态设置表单值

发布于:2024-09-05 ⋅ 阅读:(19) ⋅ 点赞:(0)
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>
      ...

版本信息:
“@ant-design/pro-components”: “1.1.25”,
“react”: “17.x”,


网站公告

今日签到

点亮在社区的每一天
去签到