react+antd二次封装组件
npm install test-nsc-componnetsThis project was bootstrapped with Create React App.
组件包含表格和表单
引用方式: `
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)
}
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