antd From Item labelCol和wrapperCol样式细节调整

antd From Item labelCol和wrapperCol样式细节调整

1：const formLayoutActivityLog={labelCol: { span: 7 },wrapperCol: { span: 17 },labelAlign: 'right'}2<Col span={6}>  这句代码  确定每一个 Item的 宽度 弹性的 6<Form.Itemlabel='Function'name="Function"{...formLayoutActivityLog}   相当于：labelCol: { span: 7 },   wrapperCol: { span: 17 },labelAlign: 'right'
labelCol和wrapperCol 总共加起来 24 份， 24份 等于 上面的 span={6}  的宽度；就是说 把 span={6} 分成24份；7是labelCol  17是wrapperCol；><Select>{!!Function && Function.length ? Function.map((item, index) => (<Option value={item.Code} key={index + 1}> {item.Value} </Option>)) : ""}</Select></Form.Item></Col>
3建议  全局 写好 formLayoutActivityLog； 组件中引入；这样 可以确保 全局的 From Item 样式统一  好维护；
如：组件  ：
import { formLayout } from '@/utils/formLayout';<Col span={12}><Form.Itemlabel="Function"name="TargetFunction"{...formLayout}>formLayout.js  ：// 表单一行两个的单项布局
export const formLayout = {labelCol: { span: 6 },wrapperCol: { span: 14 },labelAlign: 'left'
};

修改后
在这里插入图片描述

整个组件参考代码：
import styles from './common.less';
import { v4 as uuidv4 } from 'uuid';
import { uploadWhiteUrl } from '@/utils/config';
import { GetTargetGroupSelect } from '@/services/course';
import { GetServiceLine } from '@/services/courseSetting';
import { MessageError, blobDownload } from '@/utils/utils';
import React, { useEffect, useState, useRef } from 'react';
import { DownloadWhiteListTemplate } from '@/services/microLearning';
import { FileExcelTwoTone, UploadOutlined } from '@ant-design/icons';
import { Row, Col, Form, Upload, Select, Button, message } from 'antd';
import { formLayout } from '@/utils/formLayout';const TargetGroup = (props) => {let arr = [{Code: '105001',Value: "ALL",},{Code: "0",Value: "0",},{Code: "1",Value: "1",},{Code: "2",Value: "2",},{Code: "3",Value: "3",},{Code: "4",Value: "4",},{Code: "5",Value: "5",},{Code: "6",Value: "6",},{Code: "7",Value: "7",},]const { uploadType, form, initKeys } = props;const { Option } = Select;const [limit, setLimit] = useState(false);const [loading, setLoading] = useState(false);const [targetDeptOpt, setTargetDeptOpt] = useState([]);const [targetLevelOpt, setTargetLevelOpt] = useState([]);const [whiteAttachment, setWhiteAttachment] = useState([]);const [targetFunctionOpt, setTargetFunctionOpt] = useState([]);const [TargetStaffLevel, setTargetStaffLevel] = useState(arr);const [targetGroup, setTargetGroup] = useState({TargetFunction: ['1005001'],TargetLevel: ['1007001'],TargetDept: ['1006001'],TargetStaffLevel: ['105001']});let WhiteFileList = useRef([]);useEffect(() =