antd：formItemLayout 暂记

最新推荐文章于 2024-07-02 15:41:45 发布

wangfy_

最新推荐文章于 2024-07-02 15:41:45 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏： front

本文链接：https://blog.youkuaiyun.com/chushoufengli/article/details/92998364

front 专栏收录该内容

35 篇文章

订阅专栏

博客给出了表单布局的代码示例，定义了一个名为 formItemLayout 的常量，设置了 labelCol 左边留白大小和 wrapperCol 内容区大小，且两者和不能大于 24，属于前端开发相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const formItemLayout = {
labelCol: { span: 4 }, // 左边留白大小
wrapperCol: { span: 17 }, // 内容区大小（两者和不能!>24）
};

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Form, Input, Divider, Table, Modal, Row, Col, Button, Radio, Checkbox } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import { ModalProps } from 'antd/lib/modal';

const formItemLayout = {
  labelCol: { span: 4 },  // 左边留白大小
  wrapperCol: { span: 17 },  // 内容区大小（两者和不能!>24）
};

interface IProps extends FormComponentProps, ModalProps {
  dataSource?;
}

interface Istate {}

@connect(({ manager, loading }) => ({
  ...manager, // 解析store所有值
  loading: loading.models.manager,
}))
@Form.create()
class WindowModal extends PureComponent<IProps, Istate> {
  render() {
    const { dataSource = {}, form, onOk, ...ModalProps } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { title, content } = dataSource;
    const handleOk = () => {
      form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          onOk({
            id: dataSource.id,
            ...values,
          });
        }
      });
    };
    return (
      <Modal {...ModalProps} onOk={handleOk}>
        <Form>
          <Row>
            <Col>
              <Form.Item  {...formItemLayout} label="素材名称">
                {getFieldDecorator(`text`, {
                  rules: [{ required: true, message: '请输入至少一个字符！', min: 1 }],
                  initialValue: title,
                })(<Input placeholder="请输入" />)}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col>
              <Form.Item  {...formItemLayout} label="文案">
                {getFieldDecorator(`text`, {
                  initialValue: content,
                })(
                  <Input.TextArea autosize={{ minRows: 5, maxRows: 10 }} placeholder="请输入" />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col>
              <Form.Item  {...formItemLayout} label="图片">
                {getFieldDecorator(`text`, {
                  rules: [{ required: true, message: '请输入至少一个字符！', min: 1 }],
                  // initialValue: ,
                })(<Input placeholder="请输入" />)}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col>
              <Form.Item  {...formItemLayout} label="视频">
                {getFieldDecorator(`text`, {
                  // initialValue:
                })(
                  <Input placeholder="请输入" />
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

export default WindowModal;