Ant Design Pro Form 列表配置弹窗组件 - React

import { ModalForm, ProFormList, ProFormText } from '@ant-design/pro-form'; import React, { useRef, useState } from 'react'; import type { FormListOperation } from 'antd/lib/form/FormList'; import { Button, Popconfirm, Space, message } from 'antd'; import { getOnlyKey } from '@/utils/utils';

interface UpdateProps { children: React.ReactElement; // refresh: () => void; detail?: DIConfigItem; } const ConfigurationModal: React.FC = (props) => { const { children, detail } = props;

const [visible, setVisible] = useState(false); const actionRef = useRef(); // const [delPlanIdList, setDelPlanIdList] = useState<number[]>([]);

return ( <> {React.cloneElement(children, { onClick: () => setVisible(true), })} <ModalForm title={${detail ? '编辑' : '新增'}配置测试节点} visible={visible} initialValues={detail ? detail : { configPlanList: [{ nodeName: '' }] }} width={900} labelCol={{ span: 4 }} layout="horizontal" modalProps={{ onCancel: () => { setVisible(false); // form.resetFields(); }, destroyOnClose: true, }} > <ProFormList name="configPlanList" min={1} actionRef={actionRef} alwaysShowItemLabel copyIconProps={false} creatorButtonProps={false} creatorRecord={() => ({ key: getOnlyKey(), })} rules={[ { validator: async (, value) => { if (value && value.length > 0) { return; } throw new Error('至少要有一项！'); }, }, ]} deleteIconProps={false} itemRender={(, { index, record }) => ( <Space key={record.key || record.id}> <ProFormText labelCol={{ offset: 3, span: 4 }} name="nodeName" width="lg" label={节点版本${index + 1}} /> <ProFormText labelCol={{ span: 2 }} name="nodeTypeName" label='' width="md" /> <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => { if (!index) { message.warning('至少要有一项节点数据！'); return; } // setDelPlanIdList((val) => [...val, record.id]); actionRef.current?.remove(index); }} > <Button style={{ marginBottom: '24px' }} type="link"> 删除 )} />

    <Button
      type="primary"
      style={{ marginLeft: '108px' }}
      onClick={() => {
        actionRef.current?.add({});
      }}
    >
      添加节点
    </Button>
  </ModalForm>
</>

); }; export default ConfigurationModal; 怎么让节点版本跟节点名称以冒号对齐内容：可以通过调整labelCol属性来实现节点版本和节点名称以冒号对齐的效果。你可以将labelCol的span属性设置为一个较小的值，比如2，使冒号的位置向右移动。示例代码如下：

<ProFormText labelCol={{ span: 2 }} name="nodeTypeName" label='' width="md" />

将上述代码替换原来的节点版本的ProFormText组件即可。这样修改后，节点版本和节点名称的输入框将会对齐。