@alicd/cone-table-area
- name: 表格区
- tag_name: TableArea
- terminal: pc
- category: table
- scene: common
符合 Rookie 设计标准的表格展示区域场景组件,常用于搜索页等。
规则
-
TableArea
组件根据 Rookie 设计标准,囊括表格、分页、工具栏等能力,可直接与Form
等组件结合成为标准的查询列表页。
API
TableArea
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 自定义 class | String | - |
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 | 是否显示表格右上方的辅助分页组件 | Boolean | true |
hasBottomPaging | 是否显示表格底部的分页组件 | Boolean | true |
stickyHeader | 表头是否固顶 | Boolean | - |
stickyToolbar | 工具栏是否固顶。当 stickyHeader 为 true 时,该属性默认生效 | Boolean | - |
offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | 0 |
affixProps | affix组件的的属性 | ||
stickyPagination | 底部分页器是否固底 | ||
offsetBottom | 距离窗口底部偏移量 | Number | 0 |
hasStats | 是否显示左上角的条目数数据,不设置则只在设置 rowSelection 时显示 | Boolean | - |
pageSizeList | 每页显示记录数量选择器可选值 | Number | [5, 10, 20] |
pageShowCount | 页码显示的数量,更多的使用...代替 | Number | 5 |
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} 排序对应的顺序, 有 desc 和asc 两种 |
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 | 表格是否具有边框 | Boolean | true |
hasHeader | 表格是否具有头部 | Boolean | true |
isZebra | 表格是否是斑马线 | Boolean | false |
loading | 表格是否在加载中 | Boolean | false |
loadingComponent | 自定义 Loading 组件 签名: Function() => void |
Function | - |
filterParams | 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}} 示例: 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中 <Table filterParams={{id: {selectedKeys: ['one']}}}/>
|
Object | - |
sort | 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'} | Object | - |
emptyContent | 设置数据为空的时候的表格内容展现 | ReactNode | - |
primaryKey | dataSource当中数据的主键,如果给定的数据源中的属性不包含该主键,会造成选择状态全部选中 | String | 'id' |
expandedRowRender | 额外渲染行的渲染函数 签名: Function(record: Object, index: Number) => Element 参数: record: {Object} 该行所对应的数据 index: {Number} 该行所对应的序列 返回值: {Element} 渲染内容 |
Function | - |
expandedRowIndent | 额外渲染行的缩进 | Array | - |
openRowKeys | 默认情况下展开的渲染行或者Tree, 传入此属性为受控状态 | Array | - |
hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | Boolean | - |
getExpandedColProps | 设置额外渲染行的属性 签名: Function() => void |
Function | - |
onRowOpen | 在额外渲染行或者Tree展开或者收起的时候触发的事件 签名: Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void 参数: openRowKeys: {Array} 展开的渲染行的key currentRowKey: {String} 当前点击的渲染行的key expanded: {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 | 最大内容区域的高度,在fixedHeader 为true 的时候,超过这个高度会出现滚动条 |
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 ,默认为multiple
|
Object | - |
indent | 在tree模式下的缩进尺寸, 仅在isTree为true时候有效 | Number | - |
isTree | 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table | Boolean | - |
useVirtual | 是否开启虚拟滚动 | Boolean | - |
rowHeight | 设置行高 | Number/Function | - |
onBodyScroll | 在内容区域滚动的时候触发的函数 签名: Function() => void |
Function | - |
fixedScrollbar | 设为 true 时,则当表格在页面内可见,且具有横向滚动条时,保证表格的横向滚动条始终在用户可视范围内。由于 TableArea 组件默认为自适应宽度(字段内内容过多时会折行或利用 wrap 属性显示省略号),使用时请确定 TableArea 组件自身的宽度受到有效的限制。 | Boolean | false |
actionsIsAlign | 顶部 toolbar、底部分页器是否和表格边框对齐 | Boolean | false |
hasPageSizeSelector | 顶部工具栏右上角每页显示记录数量选择器类型 可选值: false, 'filter', 'dropdown' |
Enum | dropdown |
useAutomaticLayout | 是否以自适应布局方式渲染表格 | boolean | false |
TableArea.Column
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 自定义 class | String | - |
style | 自定义内联样式 | Object | - |
dataIndex | 指定列对应的字段,支持a.b 形式的快速取值 |
String | - |
cell | 行渲染的逻辑 Function(value, index, record) => Element |
ReactElement/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 , true
|
Boolean/String | - |
resizable | 是否支持列宽拖拽调整宽度,与 width 配合使用, 当该值设为true,table的布局方式会修改为fixed,需要设置width初始值. 自适应布局下不起作用 | Boolean | false |
wrap | 单元格内容超出列宽时是否自动换行,设为 false 则在一行内展示,并使用省略号代替未显示的部分, 自适应布局时默认不换行 | Boolean | true |
titleTooltip | 该列表头的提示信息 | String | - |
contentTooltip | 鼠标悬浮在本列单元格上,是否弹出全部信息的弹层。 | boolean | false |
maxWidth | 自适应布局情况下, 列的最大宽度 | number | - |
minWidth | 自适应布局情况下, 列的最小宽度 | number | - |
TableArea.ColumnGroup
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 表头显示的内容 | ReactElement/ReactNode/Function | 'column-group' |
TableArea.GroupHeader
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
cell | 行渲染的逻辑 | ReactElement/ReactNode/Function | () => '' |
hasChildrenSelection | 是否在Children上面渲染selection | Boolean | false |
hasSelection | 是否在GroupHeader上面渲染selection | Boolean | true |
TableArea.GroupFooter
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
cell | 行渲染的逻辑 | ReactElement/ReactNode/Function | () => '' |
TableArea.Toolbar
表格操作工具栏,根据设计标准,该工具栏将出现在表格区域的右上角,可放置添加、设置等操作。
该组件目前无属性配置项,通过在组件中嵌入其他子组件来配置工具栏内容。
TableArea.ToolbarBatch
表格批量操作工具栏,根据设计标准,该工具栏将出现在表格区域的左上角(靠近选择数据的勾选框和已选项数数据),用来放置对已选择的多条数据的批量操作(如批量删除、批量导出等)。
该组件目前无属性配置项,通过在组件中嵌入其他子组件来配置工具栏内容。 s you need to modify it.*