当前位置：首页 > news >正文

react、vue动态form表单

news 2025/7/4 22:11:25

需求在日常开发中反复写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;