表格概念

表格作为前端最常用的一种组件，应用在无数后台管理或者BI业务中，用于展示大量数据，让用户能够同时接触到更多的信息，同时能够对信息进行操作。表格的常用构成主要分为三元素：表头、单元格和数据。表头又可细分为行表头、列表头和角表头。

VTable 常见元素的概念

大多数人对于表格的印象只停留在行和列之中，但是对于 VTable 来说，还提供了很多的功能，下面来看下关于 VTable 的常用概念。

维度与指标

图表中最常提到的就是维度和指标，一个表格中除开维度就是指标。维度就是文本或者日期字段，用于表示当前指标存在的维度，而指标就是数值，用于表示最基本的数据，通过插入不同的维度，便可以将指标进行多维度拆分，更加细化指标。

图元

图元表示组成表格的最基础单位，基础图元包括：Text 文字、Rect 矩形、Image 图片、Line 线、Arc 弧形、Circle 圆、Group 图元组；

单元格
单元格作为表格最基本的模块，在VTable中也是得到了大量的支持，目前的单元格支持8种类型。下图展示了常见的几种单元格类型，从左到右依次是超链接、文本、图片、视频、数据条、图标、迷你图。

文本

普通的文本单元格，能够支持自定义颜色，图标，背景色，数据格式化等。各种不同的样式都可以通过函数进行配置，搭配上条件的判断，便可以支持BI产品中常见的条件格式，组成更加清晰的图表。

超链接

当需要在表格中展示对应网站，同时希望能够进行跳转，这个时候就可以把单元格类型设置为超链接以满足需求，通过配置cellType="link" 将单元格调整为超链接。

数据条

数据条类型在某些情况下特别有用，通过数据进度条的能力，可以直观的看出不同情况下的进度，例如打卡率，业绩指标等，亦或是对比不同维度下的同一指标的不同进度。将 cellType 配置为 progressbar 开启数据条。

复选框

当用户想对多条数据进行编辑时，复选框类型非常有用，复选框类型支持用户进行灵活的操作，选中想要操作的单元格。将 cellType 设置为 checkbox调整为复选框。

单选框

单选框主要运用于数据决策，权限分配等场景。用于在多个条件中选中其中一个。

迷你图

迷你图作为一种小型的图表，用于在单元格中展现不同条件下的不同时间段的趋势变化。通过在表格中嵌入迷你图，能够更好地进行数据分析。目前 VTable 仅支持折线图，后续会去支持其它图表。

图表

VTable 的单元格支持图表类型，仅需提前注册图表组件，并在单元格中按照指定格式配置spec，就可以展示出不同的图表类型。

主题与样式

VTable 提供了主题功能和自定义样式，通过自定义主题和样式，可以调整表格边框，角头，字体大小等样式，实现更加个性化的表格。

交互
拖拽调整列宽

当单元格中数据较长，超出单元格初始宽度时，会影响到数据的观看，VTable提供了拖拽边框进行调整列宽的功能，便于用户将表格调整为合适的宽度。对比于其它表格组件，在拖拽列宽方面上，VTable 的交互体验非常优秀，在拖拽的时候能看到列的宽度是实时随着鼠标的位置去变化，极大地提高了用户的体验。

滚动

得益于底层基于 canvas 进行绘制和内部的性能优化，使得VTable组件在滚动时非常流畅。同时VTable 也提供了丰富的配置给用户，便于用户可以自定义滚动条的样式。

其它交互

VTable 还支持自定义 hover 和 select 的样式，用于高亮需要的提醒的行或列。

事件

VTable 内部支持几十种不同的事件回调，包括不同的生命周期和交互事件。可以通过调用实例上的 on 方法进行事件注册，不过需要注意的是，多次重复进行注册时，需要先将之前注册的事件进行卸载，避免重复回调。

通过注册不同的回调事件，可以满足更加多样性的需求。

基础功能

VTable 诸多基础功能中，对比市面上其它组件库，最为优秀的就是冻结、单元格合并和多级表头。

冻结

VTable 中的冻结，不仅可以冻结列，还可以冻结底部行，同时支持自定义冻结的阴影样式。十分适用于需要展示底部汇总列、右侧操作按钮等需求

单元格合并和多级表头

当表头过多时，用户无法明显的分清不同列代表的含义，这个时候就会有对不同类目下的列进行分类的需求，VTable 提供了通过children配置去实现多级表头的功能，通过对不同的列去进行表头分组，能够显著提升用户的体验。

同时，VTable也支持对相同的单元格进行合并，这种合并并不限定于同一列。

表格分类

VTable 中的常见表格分为基本表格、透视表格，不同的表格也支持不同的转变形态。

基本表格
基本表格由行和列组成，用于向用户展示平铺出来的数据，能够最大化的展示商户信息、销售额等信息。

转置表格：将表格的行和列进行对调，就是表格的转置，可以应对不同用户的特殊需求。在 ListTable 中使用 transpose 开启。

树形表格：在 records 中传入树形结构的数据，便可以直接直接将表格转为树形结构，树形表格用于同时展示大量可以进行分类的数据时使用，将具有相同属性的行归到同一类，可以让用户更加直观的去定位所需要的数据。

透视表格

对于一个BI产品来说，最必不可少的就是透视表格。对比 ListTable ，PivotTable 更像是三维的，因为透视表格同时支持行、列和指标。假如有个需求，需要同时定位到某个时间点下的某个类别的销售额，此时就可以使用透视表格。

灵活的使用透视表，能够极大程度地便利商业分析流程，帮助用户进行更深层次的数据洞察，合理进行商业决策。

树形表格

默认的情况下，透视表的展示是平铺的，但对于大量行的情况下，可能无法直观的定位到所需的数据和不同层级的关系。合理的使用透视表的树形结构，会更有助于进行数据分析。可以通过在PivotTable中使用 rowHierarchyType: 'tree'开启树形展示。

透视组合图

透视组合图相当于一幅图表，将不同类型的图表进行组合成一幅大图表，每个单元格呈现不同维度的数据，透视组合图的优点在于，可以将原先大量数据混在一起的单张图表根据不同维度进行拆分，更好的进行数据决策和比较不同维度下的差异。

性能优化

以上所提到的几种表格，在 VTable 中都有着非常优秀的表现，VTable 在内部做了非常多的性能优化，能够同时进行百万级的数据展示。

总结

本文从VTable 的整体表格概念出发，逐步向下介绍了VTable的各个基本模块。作为一款高性能且灵活的canvas表格组件库，通过合理对VTable进行配置，能够展示出多样且个性化的表格。

本文档由以下人员提供