@alilc/pro-table
v1.0.0
Published
表格
Downloads
20
Readme
title
deep-table
intro component
API
| 参数名 | 说明 | 类型 | 默认值 | | ------ | ---- | ---- | ---- | | width | table 宽度 | Number/String | - | | height | table 高度 | Number/String | - | | loading | 表格是否在加载中 | Boolean | false | | device | 渲染视图 可选值 'desktop', 'tablet', 'desktop' | String | 'desktop' | | data | 表格展示的数据源 | Array | [] | | onFetchData | 动态加载数据 | Function | - | | columns | 列配置项 | Array | | | mobileMode | 移动端模式, 可选值'normal', 'card' | String | 'normal' | | actionBar | table 顶部操作按钮组 | Array | [] | | isPagination | 是否显示分页 | Boolean | true | | pagination | 翻页器配置项 | Object | - | | showMiniPager | 顶部是否显示迷你版翻页器 仅pc端支持 | Boolean | - | | actionColumn | table 操作列 | Array | [] | | actionTitle | 操作列标题title | String | - | | actionType | 操作按钮的类型 可选值 'link' , 'button' | String | - | | actionFixed | 操作列是否固定， 可选值 'none', 'right' | String | - | | actionWidth | 操作列宽度 | Number/String | - | | showActionBar | 是否显示顶部操作按钮 | Boolean | - | | actionBar | 顶部操作按钮配置 | Array | [] | | showSearch | 是否显示搜索项 | Boolean | - | | searchBarPlaceholder | 搜索项 Placeholder | String | - | | showCustomColumn | 是否显示自定义列 | Boolean | - | | showLinkBar | 是否显示外链条 | Boolean | - | | linkBar | 外链条配置项 | Array | [] | | customBarItem | 自定义栏配置 | Function | - | | actionHidden | 隐藏操作动作 | Boolean | - | | rowOrder | 行排序配置 | Object | - | | mobileExpandViewMode | 手机端存在嵌套表格时的展示模式，可选值'normal'嵌套内容直接在行里面收缩展示,'detail'嵌套内容由点击单行进入详情展示 | String | - | | primaryKey | dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中 | String | 'id' | | theme | 表格主题 表格是否具有边框: border, 表格是否是斑马线: zebra, 可选值: 'zebra', 'border', 'split', | String | 'split' | | hasHeader | 表格是否具有头部 | Boolean | true | | fixedHeader | 表头是否固定，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条 | Boolean | - | | maxBodyHeight | 最大内容区域的高度,在fixedHeader为true的时候,超过这个高度会出现滚动条 | Number/String | - | | stickyHeader | 表头是否是sticky | Boolean | - | | isTree | 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table | Boolean | - | | indent | 在tree模式下的缩进尺寸， 仅在isTree为true时候有效 | Number | - | | showRowSelector | 是否启用选择模式 | Boolean | - | | onSelect | Function(selected:Boolean, record:Object, records:Array) 用户手动选择/取消选择某行的回调 | Function | - | | onSelectAll | Function(selected:Boolean, records:Array) 用户手动选择/取消选择所有行的回调 | Function | - | | rowSelector | 选择selection的模式, 可选值 'checkboxSelector', 'radioSelector' | String | 'checkboxSelector' | | isRowSelectorDisabled | 选择行是否禁用 | Function | - | | onRowClick | 点击表格每一行触发的事件签名:Function(record: Object, index: Number, e: Event) => void参数:record: {Object} 该行所对应的数据index: {Number} 该行所对应的序列e: {Event} DOM事件对象 | Function | () => {} | | onRowMouseEnter | 悬浮在表格每一行的时候触发的事件签名:Function(record: Object, index: Number, e: Event) => void参数:record: {Object} 该行所对应的数据index: {Number} 该行所对应的序列e: {Event} DOM事件对象 | Function | () => {} | | onRowMouseLeave | 离开表格每一行的时候触发的事件签名:Function(record: Object, index: Number, e: Event) => void参数:record: {Object}该行所对应的数据index: {Number} 该行所对应的序 e: {Event} DOM事件对象 | Function | () => {} | | onResizeChange | 重设列尺寸的时候触发的事件签名:Function(dataIndex: String, value: Number) => void参数:dataIndex: {String} 指定重设的字段value: {Number} 列宽变动的数值 | Function | () => {} | | onColumnsChange | 自定义列变更时的回调 | Function | (columns) => {} | | loadingComponent | 自定义 Loading 组件请务必传递 props, 使用方式： loadingComponent={props => <Loading {...props}/>}签名:Functio(props: Object) => void参数:props: {Object} 当前点击行的key | Function | - | | expandedRowIndent | 额外渲染行的缩进 | Array | - | | hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | Boolean | - | | expandedRowRender | 额外渲染行的渲染函数签名:Function(record: Object, index: Number) => Element参数:record: {Object} 该行所对应的数据index: {Number} 该行所对应的序列返回值: {Element} 渲染内容 | Function | - | | onRowOpen | 在额外渲染行或者Tree展开或者收起的时候触发的事件签名:Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void参数:openRowKeys: {Array} 展开的渲染行的keycurrentRowKey: {String} 当前点击的渲染行的keyexpanded: {Boolean} 当前点击是展开还是收起currentRecord: {Object} 当前点击额外渲染行的记录 | Function | - | | onShowSearch | 显示搜索框之后的回调，仅移动端生效。签名:Function(table) => void | Function | - | | onHideSearch | 隐藏搜索框之后的回调，仅移动端生效。签名:Function(table) => void | Function | - |
移动端卡片模式专用
| 参数名 | 说明 | 类型 | 默认值 | | ------ | ---- | ---- | ---- | | mobileDefaultCardColumns | 移动端卡片模式 最多显示内容条数 | Number | | | mobileActionsStyle | 移动端卡片模式 操作列是否使用button模式，为false的情况下，显示的是右上角...模式 | Boolean | false |
pagination 翻页器 API
| 参数名 | 说明 | 类型 | 默认值 | | ------ | ---- | ---- | ---- | | size | 分页组件大小 可选值: 'small', 'medium', 'large' | Enum | 'medium' | | type | 分页组件类型 可选值: 'normal', 'simple', 'mini' | Enum | 'normal' | | shape | 前进后退按钮样式 可选值: 'normal', 'arrow-only', 'arrow-prev-only', 'no-border' | Enum | 'normal' | | pageShowCount | 页码显示的数量，更多的使用...代替 | Number | 5 | | pageSize | 一页中的记录数 | Number | 10 | | pageSizeSelector | 每页显示选择器类型 可选值: false, 'filter', 'dropdown' | Enum | false | | pageSizeList | 每页显示选择器可选值 | Array/Array | [5, 10, 20] | | pageNumberRender | 自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染签名:Function(index: Number) => ReactNode参数:index: {Number} 分页的页码，从1开始返回值: {ReactNode} 返回渲染结果 | Function | index => index | | pageSizePosition | 每页显示选择器在组件中的位置 可选值: 'start', 'end' | Enum | 'start' | | useFloatLayout | 存在每页显示选择器时是否使用浮动布局 | Boolean | false | | hideOnlyOnePage | 当分页数为1时，是否隐藏分页器 | Boolean | false | | showJump | type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域 | Boolean | true | | link | 设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如：http://www.taobao.com/{page} | String | - | | popupProps | 弹层组件属性，透传给Popup | Object | - | | paginationPosition | 翻页器显示位置 可选值: 'left', 'right' | String | 'right' |
数据源配置例子
{
"data":[
{
"contractDate" : {
"start" : 1534942658570,
"end" : 1534944858570,
},
"entryDate" : 1534942658570,
"name" : "王小",
"id" : 1,
"salary" : 35000,
"email" : "[email protected]",
"moneyRange" : {
"lower" : 108,
"upper" : 944,
},
}
...
],
"currentPage":1,
"totalCount":30,
}columns 配置的例子
"columns" : [
{
//分组
isGroup: true,
title: 'xxxx',
children: [
{/*{},*/}
{/*{}*/}
]
},
{
"dataKey" : "name", //value的字段名
"editType" : "text",//编译状态下的编辑类型，目前支持select,text,radio,date,custom（自定义编辑）
"dataType" : "text",//渲染格式化的类型，目前支持text,timestamp,cascadeTimestamp,money,moneyRange
"width" : 150,
"title" : "姓名",//标题b
"align" : "right", //对齐
"sortable" : true, //可排序
"hidden" : false,//是否隐藏列
"highlight" : true,//是否着重突出显示，字体加粗，仅限手机端
"editProps" : { //编辑状态下的配置
rules: [{ //校验规则，当saveRow的时候会调用
required: true,
message: 'can not be empty',
trigger: ['blur','onChange']
}]
},
"canEdit":(rowData)=>{//动态控制列是否可以编辑
return true;
},
},
{
"dataKey" : "sex",
"editType" : "radio",
"width" : 150,
"title" : "性别",
"editProps" : {
"dataSource" : [ //
{label:'男', value:'男'},
{label:'女', value:'女'},
]
},
},
{
"dataKey" : "level",
"editType" : "select",
"width" : 150,
"title" : "级别",
"editProps" : {
"dataSource" : [
{label:'高级', value:'高级'},
{label:'中级', value:'中级'},
{label:'初级', value:'初级'},
]
},
},
{
"dataKey" : "entryDate",
"editType" : "date",
"dataType" : "timestamp",
"width" : 180,
"title" : "入职日期",
"timeFormatter" : "YYYY-MM-DD",//
},
{
"dataKey" : "salary",
"dataType" : "money",
"width" : 150,
"title" : "月薪",
"editType" : "custom",
"editProps" : {
renderField:(props)=>{ //定义如何渲染自定义编辑组件
return <Input {...props}/>;
},
rules: [{ //
required: true,
message: 'can not be empty',
trigger: []
}]
},
},
{
"dataKey" : "test1",
"width" : 150,
"title" : "自定义列",
"render" : function (value, index, rowData) { //自定义渲染
return "我是自定义列";
},
},
{
"dataKey" : "contractDate",
"dataType" : "cascadeTimestamp", //
"width" : 200,
"title" : "合同日期",
"timeFormatter" : "YYYY-MM-DD",
},
],actionBar 配置的例子
"actionBar" : [
{
"title" : "操作1",
"callback" : function () {
console.log('操作1', arguments);
},
},
{
"title" : "操作2",
"callback" : function () {
console.log('操作2', arguments);
},
},
],actionColumn 配置的例子
"actionColumn" : [
{
"title" : "编辑",
"callback" : (rowData)=> {
return me.tableRef.current.getInstance().editRow(rowData);
},
"device":["desktop"]
},
{
"title" : "保存",
"callback" : (rowData)=> {
return me.tableRef.current.getInstance().saveRow(rowData); //必须return Promise，因为校验是异步过程
},
"mode":"EDIT"
},
{
"title" : "重置",
"callback" : (rowData)=> {
return me.tableRef.current.getInstance().resetRow(rowData);
},
"mode":"EDIT"
},
{
"title" : "详情",
"callback" : function () {
console.log('详情', arguments);
},
},
{
"title" : "删除",
"callback" : function () {
console.log('删除', arguments);
},
},
{
"title" : "复制",
"callback" : function () {
console.log('复制', arguments);
},
},
{
"title" : "下架",
"callback" : function () {
console.log('下架', arguments);
},
"isDisabled" : function (item, index, actionRowData) {
console.log('isDisabled', arguments);
return true;
},
"mode":"EDIT"
},
],actionBar 配置的例子
"linkBar" : [
{
"title" : "外链1",
"callback" : function () {
console.log("外链1", arguments);
},
},
{
"title" : "外链2",
"callback" : function () {
console.log("外链2", arguments);
},
},
],行排序配置例子
"rowOrder" : {
"defaultValue" : {
"text" : '排序方式一',
"value" : '123',
},
"items" : [
{
"text" : '排序方式一',
"value" : '123',
},
{
"text" : '排序方式二',
"value" : '456',
},
],
"onChange" : function (data) {
console.log(data);
},
},自定义栏配置例子
"customBarItem" : {
"render" : function () {
return (
<div style={{color : 'red'}} onClick={(e) => {
console.log(e);
}}>自定义内容</div>
);
},
"rightRender": () { },
"bottomRender": () {}
},混合模式 配置的例子
props:{
"expandedRowRender" : (record, index) => {
return (
<div style={{lineHeight : '22px'}}>
我是展开的内容 <br/>
我是展开的内容 <br/>
</div>
);
},
"expandedRowIndent" : [2, 2],
"onRowOpen" : (openRowKeys, currentRowKey, expanded, currentRecord) => {
console.log(openRowKeys, currentRowKey, expanded, currentRecord)
},
}pagination 配置的例子
'pagination' : {
'size' : "medium",
'type' : "normal",
'shape' : "arrow-only",
'pageSize' : 10,
'pageSizeSelector' : false,
'pageSizeList' : "5,10,20",
'pageSizePosition' : "end",
"paginationPosition" : "right",
'hideOnlyOnePage' : false,
'showJump' : true,
}