0.1.0 • Published 5 years ago

@alicd/cone-table-area v0.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

@alicd/cone-table-area

组件开发文档


  • name: 表格区
  • tag_name: TableArea
  • terminal: pc
  • category: table
  • scene: common

符合 Rookie 设计标准的表格展示区域场景组件,常用于搜索页等。

规则

  • TableArea 组件根据 Rookie 设计标准,囊括表格、分页、工具栏等能力,可直接与 Form 等组件结合成为标准的查询列表页。

API

TableArea

属性说明类型默认值
className自定义 classString-
style自定义内联样式Object-
dataSource表格区域展示的数据源,需要包含表格中的数据数组和总数据条数两部分内容。该属性数据所需的格式见 formatter 属性Object-
formatter从 dataSource 属性中提取表格中当前显示的数据和总数据条目的函数(dataSource: any, paging: object) => { "dataSource": any[]; "total": number; }默认分别取 dataSource.data.resultList 和 dataSource.data.total,如果 dataSource 是一个数组,默认 formatter 将认为所有数据都位于该数组中,并按照当前 paging 中的 pageSize 和页码,在前端进行分页显示。
paging表格区域的分页状态,current 为当前页码,pageSize 为每页显示的记录条数,props 可定制 Pagination 组件的属性{ "current": number; "pageSize": number; "props": object; }-
defaultPaging表格区域默认的分页状态{ "current": number; "pageSize": number; "props": object; }{ "current": 1, "pageSize": 10 }
onPagingChange用户进行换页或切换每页显示内容条数时调用的回调(paging: object) => void-
hasMinorPaging是否显示表格右上方的辅助分页组件Booleantrue
hasBottomPaging是否显示表格底部的分页组件Booleantrue
stickyHeader表头是否固顶Boolean-
stickyToolbar工具栏是否固顶。当 stickyHeader 为 true 时,该属性默认生效Boolean-
offsetTop距离窗口顶部达到指定偏移量后触发Number0
affixPropsaffix组件的的属性
stickyPagination底部分页器是否固底
offsetBottom距离窗口底部偏移量Number0
hasStats是否显示左上角的条目数数据,不设置则只在设置 rowSelection 时显示Boolean-
pageSizeList每页显示记录数量选择器可选值Number5, 10, 20
pageShowCount页码显示的数量,更多的使用...代替Number5
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() => { }
onSort点击列排序触发的事件签名:Function(dataIndex: String, order: String) => void参数:dataIndex: {String} 指定的排序的字段order: {String} 排序对应的顺序, 有descasc两种Function() => { }
onFilter点击过滤确认按钮触发的事件签名:Function(filterParams: Object) => void参数:filterParams: {Object} 过滤的字段信息Function() => { }
onResizeChange重设列尺寸的时候触发的事件签名:Function(dataIndex: String, value: Number) => void参数:dataIndex: {String} 指定重设的字段value: {Number} 列宽变动的数值Function() => { }
getRowProps设置每一行的属性,如果返回值和其他针对行操作的属性冲突则无效。签名:Function(record: Object, index: Number) => Object参数:record: {Object} 该行所对应的数据index: {Number} 该行所对应的序列返回值:{Object} 需要设置的行属性Function() => { }
getCellProps设置单元格的属性,通过该属性可以进行合并单元格签名:Function(rowIndex: Number, colIndex: Number, dataIndex: String, record: Object) => Object参数:rowIndex: {Number} 该行所对应的序列colIndex: {Number} 该列所对应的序列dataIndex: {String} 该列所对应的字段名称record: {Object} 该行对应的记录返回值:{Object} 返回td元素的所支持的属性对象Function() => { }
hasBorder表格是否具有边框Booleantrue
hasHeader表格是否具有头部Booleantrue
isZebra表格是否是斑马线Booleanfalse
loading表格是否在加载中Booleanfalse
loadingComponent自定义 Loading 组件签名:Function() => voidFunction-
filterParams当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}}示例:假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中<Table filterParams={{id: {selectedKeys: ['one']}}}/>Object-
sort当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'}Object-
emptyContent设置数据为空的时候的表格内容展现ReactNode-
primaryKeydataSource当中数据的主键,如果给定的数据源中的属性不包含该主键,会造成选择状态全部选中String'id'
expandedRowRender额外渲染行的渲染函数签名:Function(record: Object, index: Number) => Element参数:record: {Object} 该行所对应的数据index: {Number} 该行所对应的序列返回值:{Element} 渲染内容Function-
expandedRowIndent额外渲染行的缩进Array-
openRowKeys默认情况下展开的渲染行或者Tree, 传入此属性为受控状态Array-
hasExpandedRowCtrl是否显示点击展开额外渲染行的+号按钮Boolean-
getExpandedColProps设置额外渲染行的属性签名:Function() => voidFunction-
onRowOpen在额外渲染行或者Tree展开或者收起的时候触发的事件签名:Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void参数:openRowKeys: {Array} 展开的渲染行的keycurrentRowKey: {String} 当前点击的渲染行的keyexpanded: {Boolean} 当前点击是展开还是收起currentRecord: {Object} 当前点击额外渲染行的记录Function-
onExpandedRowClick点击额外渲染行触发的事件签名:Function(record: Object, index: Number, e: Event) => void参数:record: {Object} 该行所对应的数据index: {Number} 该行所对应的序列e: {Event} DOM事件对象Function-
fixedHeader表头是否固定,该属性配合maxBodyHeight使用,当内容区域的高度超过maxBodyHeight的时候,在内容区域会出现滚动条Boolean-
maxBodyHeight最大内容区域的高度,在fixedHeadertrue的时候,超过这个高度会出现滚动条Number-
rowSelection是否启用选择模式属性:getProps: {Function} Function(record, index)=>Object 获取selection的默认属性onChange: {Function} Function(selectedRowKeys:Array, records:Array) 选择改变的时候触发的事件,注意: 其中records只会包含当前dataSource的数据,很可能会小于selectedRowKeys的长度。onSelect: {Function} Function(selected:Boolean, record:Object, records:Array) 用户手动选择/取消选择某行的回调onSelectAll: {Function} Function(selected:Boolean, records:Array) 用户手动选择/取消选择所有行的回调selectedRowKeys: {Array} 设置了此属性,将rowSelection变为受控状态,接收值为该行数据的primaryKey的值mode: {String} 选择selection的模式, 可选值为single, multiple,默认为multipleObject-
indent在tree模式下的缩进尺寸, 仅在isTree为true时候有效Number-
isTree开启Table的tree模式, 接收的数据格式中包含children则渲染成tree tableBoolean-
useVirtual是否开启虚拟滚动Boolean-
rowHeight设置行高Number/Function-
onBodyScroll在内容区域滚动的时候触发的函数签名:Function() => voidFunction-
fixedScrollbar设为 true 时,则当表格在页面内可见,且具有横向滚动条时,保证表格的横向滚动条始终在用户可视范围内。由于 TableArea 组件默认为自适应宽度(字段内内容过多时会折行或利用 wrap 属性显示省略号),使用时请确定 TableArea 组件自身的宽度受到有效的限制。Booleanfalse
actionsIsAlign顶部 toolbar、底部分页器是否和表格边框对齐Booleanfalse
hasPageSizeSelector顶部工具栏右上角每页显示记录数量选择器类型可选值: false, 'filter', 'dropdown'Enumdropdown
useAutomaticLayout是否以自适应布局方式渲染表格booleanfalse

TableArea.Column

参数说明类型默认值
className自定义 classString-
style自定义内联样式Object-
dataIndex指定列对应的字段,支持a.b形式的快速取值String-
cell行渲染的逻辑Function(value, index, record) => ElementReactElement/ReactNode/Function(value) => value
title表头显示的内容ReactElement/ReactNode/Function-
settingTitle使用全局配置组件 SearchPageSetting 时的表格名称,当 title 部位 String 类型时,必须填写该属性String-
sortable是否支持排序Boolean-
width列宽,注意在锁列的情况下一定需要配置宽度Number/String-
align单元格的对齐方式可选值:'left', 'center', 'right'Enum-
filters生成标题过滤的菜单, 格式为[{label:'xxx', value:'xxx'}]Array<Object>-
filterMode过滤的模式是单选还是多选可选值:'single', 'multiple'Enum'multiple'
lock是否支持锁列,可选值为left,right, trueBoolean/String-
resizable是否支持列宽拖拽调整宽度,与 width 配合使用, 当该值设为true,table的布局方式会修改为fixed,需要设置width初始值. 自适应布局下不起作用Booleanfalse
wrap单元格内容超出列宽时是否自动换行,设为 false 则在一行内展示,并使用省略号代替未显示的部分, 自适应布局时默认不换行Booleantrue
titleTooltip该列表头的提示信息String-
contentTooltip鼠标悬浮在本列单元格上,是否弹出全部信息的弹层。booleanfalse
maxWidth自适应布局情况下, 列的最大宽度number-
minWidth自适应布局情况下, 列的最小宽度number-

TableArea.ColumnGroup

参数说明类型默认值
title表头显示的内容ReactElement/ReactNode/Function'column-group'

TableArea.GroupHeader

参数说明类型默认值
cell行渲染的逻辑ReactElement/ReactNode/Function() => ''
hasChildrenSelection是否在Children上面渲染selectionBooleanfalse
hasSelection是否在GroupHeader上面渲染selectionBooleantrue

TableArea.GroupFooter

参数说明类型默认值
cell行渲染的逻辑ReactElement/ReactNode/Function() => ''

TableArea.Toolbar

表格操作工具栏,根据设计标准,该工具栏将出现在表格区域的右上角,可放置添加、设置等操作。

该组件目前无属性配置项,通过在组件中嵌入其他子组件来配置工具栏内容。

TableArea.ToolbarBatch

表格批量操作工具栏,根据设计标准,该工具栏将出现在表格区域的左上角(靠近选择数据的勾选框和已选项数数据),用来放置对已选择的多条数据的批量操作(如批量删除、批量导出等)。

该组件目前无属性配置项,通过在组件中嵌入其他子组件来配置工具栏内容。 s you need to modify it.*