自定义渲染
在数据分析领域，为了更直观地展示数据，我们经常会使用图表或格来呈现。而在某些特定场景下，我们希望为表格的某些单元格添加更富有表现力和个性化的展示效果。这时，表格单元格内容自定义渲染功能就显得尤为重要。通过单元格内容自定义渲染，我们可以实现以下几类场景需求：
-
富文本展示。在单元格内展示具有多种样式和排布的文本，方便用户快速获取关键信息。
-
图文混排。在单元格内根据数据展示图片或图标，使得数据更直观。
-
图形化展示数据。以图形化方式来展示数据，如圆形，矩形等，使数据比较和分析更直观。
-
单元格自定义排版布局。在单元格内任意排列自定义渲染元素，实现特殊布局需求。
在 VTable 库中，我们可以通过定义表格单元格内容自定义渲染来实现以上场景需求。因为更具灵活性，可根据业务数据进行定制展示，但对于接入方的成本也较大，需要自己计算位置等。（绘制自定义内容的同时，允许按 VTable 内部逻辑绘制出默认内容，请将 renderDefault 设置为 true。）
案例分析
我们接下来以实现下图效果为例来讲解实现过程。
准备数据：
上图表格中 body 数据单元格部分一共有两行，对应到我们 records 中的两条数据。
records:[
{
'type': 'important',
"urgency": ['crisis','urgent problem','tasks that must be completed within a limited time'],
"not_urgency": ['preventive measures','development relationship','identify new development opportunities','establish long-term goals'],
},
{
'type': 'Not\nimportant',
"urgency": ['Receive visitors','Certain calls, reports, letters, etc','Urgent matters','Public activities'],
"not_urgency": ['Trivial busy work','Some letters','Some phone calls','Time-killing activities','Some pleasant activities'],
},
],
内容拆解
分析每个单元格的展示内容组成：
- 标题
- 事项列表
- 标题背景矩形
- 列表符号（圆形，矩形，星行）
所以这里我们需要用到多种自定义图元：
如何使用自定义渲染接口
在 VTable 中，我们可以通过以下两种方式定义自定义渲染：
customRender全局设置自定义渲染，如果每一列的布局基本一致建议使用全局方式；columns.customRender按列设置自定义渲染，如果每一列的布局不同，建议每一列单独配置；
配置内容支持两种形式：
- 对象形式
- 函数形式，可结合业务逻辑返回不同的结果
具体参数说明可参考 API 说明customRender
从上述示例效果图中可以看出urgency和not urgency这两列的布局是一致的，所以我这里采用全局设置的方式。
表头单元格自定义渲染
如果想要对表头单元格进行自定义渲染可以使用 columns.headerCustomRender。用法同 columns.customRender。
body 单元格自定义渲染
上文讲到的 demo 即 customRender 是对 body 单元格的自定义渲染。
自动布局用法
在某些场景下，我们希望自定义渲染的元素能够自动布局，以适应单元格的大小。或者期望使用更灵活的方式来布局，用更接近 html/react 的写法来写代码，那么可以参考教程自定义渲染自动布局。