This project was bootstrapped with Create React App.

react+antd二次封装控件

组件包含表格和表单 引用方式： `` import { MyTable, SearchForm } from 'ademoreactnpm'; ``

表格参数说明

resizeAble：true/false ----是否开启表格列可伸缩

bordered：true/false -----是否有边框

isexpandedRowRender：true/false -----是否开启展开隐藏功能

expandedRowFiled：string -----展开隐藏字段

isrowSelection：true/false -----是否开启表格可选状态

scroll：{x：'', y: ''}

isChildTable：true/false -------是否展示子表格，若开启嵌套子表格展示则表个数据内应包含childrenTable字段，该字段为子表格表格及表头数据集合，结构为： ` `` childrenTable:{ columns: [], data: [] }

pagination：true/false/object object： const xxxx = { showSizeChanger: true, showQuickJumper: true, showTotal: 页数, pageSize, current: 第几页, total: xxx, onShowSizeChange: (current, pageSize) => this.function(current, pageSize), onChange: (current) => this.function({ ...searchItem, page: current, size: pageSize }), }; ` `` 详细配置可查看antd官网分页配置

{#### 表格数据及表头数据依然为antd格式(不嵌套子表格时) #######}

dataSource：[] ------表格数据 columns: [] ------表头数据

{#### 函数事件 #####}

onSelectChange 勾选表格数据返回值为选中key值及每一行的数据集合function(key,val){}

handleChange 备用函数 `` function (pagination, filters, sorter, extra){ console.log('params', pagination, filters, sorter, extra); } ``

expandedRowRender 展开隐藏事件 `` function (record, index, indent, expanded) { // console.log('record', record) // console.log('index', index) // console.log('indent', indent) // console.log('expanded', expanded) } ``

表单参数说明

formList：[] -----表单渲染数据，数据格式如下： commenFormList = [ { filedType: '', type: 'drageUpload', childtype: '', filed: 'filelist', defaultData: '', placeholder: '', requeird: false, label: 'xxx', enable: false}, {filedType: '', type: 'fileUpload', childtype: '', filed: 'file', defaultData: '', placeholder: '', requeird: false, label: '文件', enable: false}, { filedType: 'string', type: 'input', childtype: '', filed: 'name', defaultData: '', placeholder: '请输入姓名', requeird: false, label: '姓名', enable: false }, { filedType: 'array', type: 'treeSelect', childtype: '', filed: 'department', defaultData: '', placeholder: '请选择部门', requeird: false, label: '部门', option:[ { title: 'Node1', value: '0-0', key: '0-0', children: [ { title: 'Child Node1', value: '0-0-0', key: '0-0-0', }, ], }, { title: 'Node2', value: '0-1', key: '0-1', children: [ { title: 'Child Node3', value: '0-1-0', key: '0-1-0', }, ], }, ], enable: false }, { filedType: 'string', type: 'select', childtype: '', filed: 'sex', defaultData: '', placeholder: '请选择性别', requeird: false, label: '性别', enable: false, option:[ {value: '男', title: '男'}, {value: '女', title: '女'} ] }, { filedType: 'array', type: 'Checkbox', childtype: '', filed: 'itemtype', defaultData: '', placeholder: '请选择xxx', requeird: false, label: 'xxx', enable: false, option: [ {value: 'A', title: 'A', enable: false}, {value: 'B', title: 'B', enable: false}, {value: 'C', title: 'C', enable: false}, ] }, { filedType: 'string', type: 'radio', childtype: '', filed: 'radiotype', defaultData: '', placeholder: '请选择xxx', requeird: false, label: 'xxx', enable: false, option: [ {value: 'A', title: 'A', enable: false}, {value: 'B', title: 'B', enable: false}, {value: 'C', title: 'C', enable: false}, ] }, {filedType: 'time', type: 'yearpicker', childtype: '', filed: 'year', defaultData: '', placeholder: '请选择年份', requeird: false, label: '年份', enable: false}, {filedType: 'time', type: 'weekpicker', childtype: '', filed: 'week', defaultData: '', placeholder: '请选周数', requeird: false, label: '周次', enable: false}, {filedType: 'time', type: 'rangepicker', childtype: '', filed: 'datetodate', defaultData: '', placeholder: '请选时间段', requeird: false, label: '起止日期', enable: false}, {filedType: 'time', type: 'MonthPicker', childtype: '', filed: 'month', defaultData: '', placeholder: '请选月份', requeird: false, label: '月份', enable: false}, ]

formLayout ------表单样式配置如下： `` const conmmenformLayout = { layout: 'horizontal', md: 24, sm: 24 } ``

formItemLayout ------表单项格式样式配置如下： `` const conmmenformItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 6 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 18 }, }, } `` formType：commen/search -----通用提交表单/搜索表单

btnCon：{confirm:'xxx', cancel: 'xxx'} ------定义表单底部按钮文字

handleSubmit：function ------提交表单数据返

disabled：true/false ------表单项是否可用

btnLocal：表单按钮位置设置配置如下： btnLocal={{md: 4, offset: 8}}

handleCancel：function -----取消按钮点击事件

limtLength：Number ------作为搜索表单时防止表单项过多配置折叠显示条目数

isFormchildren: 'form'/'commen' 在该表单无法满足需求时，使用react的children属性自定义组件，form为定义在表单内为表单内元件，commen为表单外部提交按钮下部位置（样式由使者在父组件内添加上），当前结构为： [ {key:"usernames", defaultData: '李四', filed: 'usernames', label: '姓名', comments: 元素标签}, {key:"telphone", defaultData: '123213212', filed: 'telphone', label: '固话', comments: 元素标签}, ]

上传参数说明： uploadUrl：上传路径 listType：按钮上传时的上传样式类型string（text, picture 和 picture-card） draghint,dragtxt: 拖拽上传文字内容string

表单项添加上传控件（拖拽上传及按钮点击上传）

表单默认值返回，添加switch开关,头像类图片上传修改为提交时将数据传至父组件内由个人处理至表单数据内。。。。。。。

由于将antd的全部样式引入致使包体积过大，改进中。。。。。