react、vue动态form表单

news2024/10/6 10:30:06

需求在日常开发中反复写form 是一种低效的开发效率，布局而且还不同这就需要我们对其封装

为了简单明了看懂代码，我这里没有组件，都放在一起，简单抽离相信作为大佬的你，可以自己完成，

一、首先我们做动态form 要明白几点：

1、类型，2、检验，3、不同组件又不同的方法事件（重点）4、布局（更加通用型）

UI库是antd(element同理替换组件即可主要是父组件formItems标签替换)

import {Button, Cascader, Col, DatePicker, Form, Input, InputNumber, Mentions, Row, Select, TreeSelect} from "antd";
import React from "react";
import style from "./style.less";

const {RangePicker} = DatePicker;

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 18},
  },
};

type ColSpanType = {
  offset?: number;
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
};

const FormApp: React.FC = () => {
//根据ui 设置布局
  const responsiveLayout: ColSpanType = {
    xs: 24,
    sm: 24,
    md: 8,
    lg: 8,
    xl: 8,
  };

  const formItems = [
    {
      label: 'Input', 
      name: 'Input', 
      rules: [{required: true, message: "Please input!"}], 
      component: Input, 
      placeholder: '请输入',
      events: {
        onChange: (e) => console.log(e.target.value),
        onFocus: () => console.log('Input focused'),
        // Add other events here
      },
    },
    // ... other form items ...
  ];

  return (
    <Form {...formItemLayout} className={style.formContainer}>
      {formItems.map((item, index) => (
        <Col {...responsiveLayout} key={index}>
          <Form.Item label={item.label} name={item.name} rules={item.rules}>
            <item.component placeholder={item.placeholder} style={{width: "100%"}} {...item.events} />
          </Form.Item>
        </Col>
      ))}
      <Col span={24}>
        <Row justify='end'>
          <Form.Item>
            <Button type='primary' htmlType='submit'>
              Submit
            </Button>
          </Form.Item>
        </Row>
      </Col>
    </Form>
  );
};

export default FormApp;