正文
:
417
,
dead
:
2
,
t
:
'2020-02-15 19:52:02'
},
]
const
columns = [
{
code
:
'prov'
,
name
:
'省份'
,
width
:
150
},
{
code
:
'confirm'
,
name
:
'确诊'
,
width
:
100
,
align
:
'right'
},
{
code
:
'cure'
,
name
:
'治愈'
,
width
:
100
,
align
:
'right'
},
{
code
:
'dead'
,
name
:
'死亡'
,
width
:
100
,
align
:
'right'
},
{
code
:
't'
,
name
:
'更新时间'
,
width
:
180
},
]
return
<
BaseTable
dataSource
=
{dataSource}
columns
=
{columns}
/>
}
虚拟滚动
当数据量较大时，表格会自动开启虚拟滚动。
锁列与单元格合并
在维度、指标数量较多情况下，设置 column.lock=true 可以在表格左侧或右侧锁定指定的列，提升交互体验。
在更复杂的情况下，可以设置 column.getSpanRect 来指定单元格的合并情况；column.getSpanRect 返回每个单元格被合并之后的矩形位置，在渲染表格时，BaseTable 会根据单元格的位置和对应的 spanRect，来为单元格动态设置 rowSpan/colSpan，使得在虚拟滚动场景下合并单元格依然可以生效。
基于这些实用的表格特性，我们可以在表格上进行深度定制与二次开发，实现下钻、右键菜单、交叉表/透视表、收拢/展开等功能。同时表格内置的虚拟滚动保证了大数据量下表格仍具有很好的性能，上层使用者不需要担心性能问题。
基于 BaseTable 的一个简单的透视表 demo（在线 demo）。
表格功能拓展
BaseTable 是一个相对底层的 React 组件，仅提供了基本的表格渲染功能。为了方便对表格进行功能拓展，我们为 BaseTable 设计了一个简单的拓展方案，然后我们基于该方案实现了一些常见的表格功能，包括排序、树状模式、列高亮等。
