@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} 展开的渲染行的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 | 最大内容区域的高度,在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.*