0.1.0 • Published 5 years ago
@alicd/cone-table-area v0.1.0
@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.*
0.1.0
5 years ago