接口文档SDK业务专题开发者工具

报表表格 ReportTable

报表表格组件便于开发者方便、快捷地展示报表数据,并通过排序等操作优化数据展示。

使用说明

import { Report } from '@tencent/tsaui';
const { ReportTable } = Report;
<ReportTable {...this.props} />

组件示例

属性说明

名称描述类型默认值
data
表格数据array[]
page
当前页码数number1
title
表格titlestring|element'数据报表'
keyNameMap
列数据配置,包含label, description, sortable 属性object{}
pageSize
一页显示数据条数number5
onPageChange
改变当前页回调funcfunction(){}
showPageInfo
是否展示“一页显示数据条数”信息booltrue
onPageSizeChange
改变“一页显示数据条数”回调funcfunction(){}
pageSizeList
可选的“一页显示数据条数”列表,传空数组表示不可选择,限定为pageSizearray[5, 10, 20]
showTotalPage
是否展示“总页数”信息booltrue
sortName
排序字段名string''
sortOrder
排序方式,可选'desc'或'asc'string''
onSort
点击按某字段排序后的回调funcfunction(){}
emptyText
表格数据为空时的提示文案string'抱歉,暂无相关数据记录'
loading
是否加载数据中boolfalse
adjustWidth
列宽是否可拖动调节boolfalse

案例

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)