基于antd pro二次封装的组件库react-antd-super-form

基于antd pro二次封装的组件库react-antd-super-form

该组件库是我们对antd pro进行二次封装的一个偏业务层面的一个React ui组件库。

该组件库诞生的初衷？

该组件库主要是为了提升中后台管理系统开发效率，将antd封装好的各个组件进行组合以达到页面高度配置化。

后台管理系统需求接触多了之后我们会发现各个模块间的区别其实并不大，无非就是表格、表单、弹窗这些组件里面嵌套各个粒度更小的组件。

所以我们就考虑一般组件封装都是将大的组件拆分成粒度更小的组件，那为什么不能将这些粒度小的组件组合到一起达到页面高度可配置化呢？

Install

npm install --save react-antd-super-form

Usage

import React, { Component } from 'react';
import SuperForm, { Table, List, Form, Modal, ModalTable } from 'react-antd-super-form';

class Example extends Component {
  render () {
    return (
      <SuperForm
        // ...
        search={
  {}}
        table={
  {}}
      />
      <Form 
       // ...
       data={[]}
       data={(form)=>[]}
      />

    )
  }
}

---

该组件库主要分为四个部分，SuperForm|Table|Form|Modal。

 

SuperForm

---

该组件主要用来配置模块的入口页面，将table和search进行组合，达到列表页面通过配置SuperForm组件的参数快速生成页面的目的。

基本结构

<SuperForm
    formStyle={
  {
      // 搜索区样式
    }}
    tableStyle={
  {
      // 数据区样式
    }}
    type="table|list" //default table
    search={
      {