微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162

本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术

一、需求描述 ​

我们在开发大屏或驾驶舱时有时候需要用到tab组件，但是tab组件的切换是一个麻烦事，因为系统默认的tab标签仅支持上下左右四个位置，且必须贴紧tab块。本文将提供一种可行的方案，通过报表块模拟tab块的tab标签，从而实现tab标签与tab块的分离，其最终效果如下：

本方案的实现步骤如下：

1. 在决策报表界面拖入一个报表块，并在报表块中使用单元格创建出几个tab标签。
2. 通过超链接给单元格增加点击事件，点击的同时通过js切换tab，并将当前值通过动态参数传递给当前报表块。
3. 通过条件属性+动态参数实现点击不同单元格，切换不同的样式。
4. 通过调整原生tab标签的高度从而实现隐藏原生tab标签的效果。

注1：不支持移动端使用。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。

二、具体操作 ​

第一步 ​

在编辑界面，往body中拖入一个报表块。 双击报表块，并在合适的位置填入三个标签的值。具体效果如下图：

第二步 ​

给报表增加一个模板参数tabstr，用来存储当前显示的tab标签的值。默认值填写为第一个tab标签单元格的值。

第三步 ​

给报表块三个单元格都添加一个条件属性，用来保证初识背景为比较浅的效果。 这里笔者用了一个比较浅的背景图，大家在实际生产中也可以使用颜色等之类的效果。

第四步 ​

紧接上一步，再给每个单元格增加一个条件属性，用来标记被选中的单元格背景为比较深的效果。 条件属性的条件就填$$$==$tabstr，表示当前单元格的值与模板参数tabstr值相等。

第五步 ​

给每个单元格增加一个超级链接，类型选择为当前决策报表对象。表单对象就选择当前报表块，参数填tabstr，值通过公式将当前单元格的值传递进来。

第六步 ​

给每个单元格再添加一个超级链接，类型选择为JavaScript脚本，其中代码如下：

_g().getWidgetByName("tabpane0").showCardByIndex(0);

_g().getWidgetByName("tabpane0").showCardByIndex(0);

注意：不同单元格需要切换的tab也是不一样的，所以，要注意showCardByIndex(0)中索引的顺序。

按照以上步骤配置完后，点击预览即可看到和开头类似的效果了。

三、模板文件下载 ​

扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。