报表表格 ReportTable
报表表格组件便于开发者方便、快捷地展示报表数据，并通过排序等操作优化数据展示。
使用说明
import { Report } from '@tencent/tsaui';
const { ReportTable } = Report;
<ReportTable {...this.props} />
组件示例
属性说明
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
data | 表格数据 | array | [] |
page | 当前页码数 | number | 1 |
title | 表格title | string|element | '数据报表' |
keyNameMap | 列数据配置，包含label, description, sortable 属性 | object | {} |
pageSize | 一页显示数据条数 | number | 5 |
onPageChange | 改变当前页回调 | func | function(){} |
showPageInfo | 是否展示“一页显示数据条数”信息 | bool | true |
onPageSizeChange | 改变“一页显示数据条数”回调 | func | function(){} |
pageSizeList | 可选的“一页显示数据条数”列表，传空数组表示不可选择，限定为pageSize | array | [5, 10, 20] |
showTotalPage | 是否展示“总页数”信息 | bool | true |
sortName | 排序字段名 | string | '' |
sortOrder | 排序方式，可选'desc'或'asc' | string | '' |
onSort | 点击按某字段排序后的回调 | func | function(){} |
emptyText | 表格数据为空时的提示文案 | string | '抱歉，暂无相关数据记录' |
loading | 是否加载数据中 | bool | false |
adjustWidth | 列宽是否可拖动调节 | bool | false |
案例
keyNameMap = {
click: {
label: '点击量', // click字段表头名称
description: '点击量的描述', // click字段表头hover后的提示，如为空则没有提示
sortable: true // 可否使用click字段排序
}
}
// 修改当前页码后的回调, event: 点击事件, page: 选中页码
onPageChange(event, page)
// 修改每页展示数据条数后的回调, pageSize: 一页展示数据条数
onPageSizeChange(pageSize)
// 点击排序之后的回调, event: 点击事件, sortName: 排序字段名, sortOrder: 排序方式(desc/asc)
onSort(event, sortName, sortOrder)
