点击单元格切换Tab页

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 预期效果

自定义按钮切换Tab页 文档中，介绍了如何使用多个标题组件通过 JS 切换 Tab 页，但当 Tab 页较多时，该方案需要写多个 JS 代码，比较麻烦。

那么本文将介绍的是，如何通过表格单元格的扩展，通过点击单元格切换 Tab 页。预期效果如下图所示：

1.3 实现思路

在 表格组件 中，列出「Tab 页索引」及「对应 Tab 页」的关系，给单元格添加 JavaScript 类型的 超级链接，通过传参给 showCardByIndex() 接口展示对应的 Tab 页。

2.1 新建模板

点击设计器左上角「文件>新建可视化看板」，创建一张空白看板，可自定义名称和尺寸。如下图所示：

2.2 准备数据

点击左下方新建 内置数据集 ，新建一列「序号」和「对应Tab页」，序号从 0 开始，表示 Tab 页的索引，Tab页字段可根据实际情况修改。如下图所示：

2.3 设置 Tab 组件

1）点击模板画布右侧「容器>Tab」，将 Tab 组件添加到画布中，点击组件右上角「新建标签页」再添加两个标签页。

向每个标签页中任意拖入组件即可。如下图所示：

2）选中 Tab 组件整体，取消显示切页按钮，取消自动轮播。如下图所示：

2.4 设置表格组件

1）添加一个表格组件到画布中，点击「编辑组件」进入表格编辑界面。如下图所示：

2）将「序号」字段拖入 A2 单元格，「对应Tab页」字段拖入 B2 单元格，第一行写上对应标题。

3）选中 B2 单元格，点击右侧「超级链接」，添加一个 JavaScript 脚本类型的超链。首先添加一个参数 a，参数值选择公式，输入 A2 ，再输入 JavaScript 脚本：

var b=Number(a); // 将参数 a 转化为数值类型，赋值给 b
duchamp.getWidgetByName("Tab1_页面1").showCardByIndex(b); //设置 Tab1_页面1 展示第 b 个标签页

步骤如下图所示：

注：首次设置超链后单元格样式改变，可自行修改。

4）可根据实际情况设置单元格边框、字体等样式，设置完成后，点击表格编辑界面左上方「返回可视化看板」返回画布。

2.5 效果预览

2.5.1 PC 端

点击右上角「预览」。预览效果如 1.2 节预期效果所示。

2.5.2 移动端

预览方式请参考 FVS移动端预览 ，效果如下图所示：

点击下载模板：点击单元格切换Tab页.fvs