1. 概述编辑
1.1 应用场景
模板维度、数据较多，又不希望模板页面过长时，可使用 Tab 块，手动切换维度，且可以展示每个维度的标题。
同一个页面有多个明细数据表，不希望每一个都平铺展示出来，可使用 Tab 块，根据实际需要展示数据。
1.2 功能简介
Tab 块可实现多维度切换，如下图所示：
2. 新增 Tab 块编辑
注：决策报表中才能使用 Tab 块。
1）在 FineReport 设计器中点击文件>新建决策报表。
2）将「空白块」中的 Tab 块拖入到决策报表中，如下图所示：
3. Tab 布局编辑
3.1 新增 Tab
点击右侧的
按钮可以新增 Tab，如下图所示：
3.2 切换 Tab
默认提供一个显示在上方的 Tab 切换样式，点击 Tab 标题按钮，显示对应 Tab 主体。设计器中正在编辑的按钮，默认显示为灰色，如下图所示：
3.3 删除 Tab
如下图所示：
3.4 移动 Tab
有时在制作一张决策报表后，发现少了部分内容，需要重新插入 Tab 块加以补充完整。但 Tab 块默认是自动添加在最后面的。
邮件点击所要移动的 Tab 页，会弹出四个选项：移动到首位，往前移动，往后移动和移动到末尾。如下图所示：
4. Tab 块属性编辑
tablayout 作为 Tab 布局的整体，tabpane 作为容纳 Tab 标签的面板，Tab 是每个 Tab 标签页（包括 Tab 按钮、Tab 标签页所在的空白设计区域）。
4.1 tablayout0
tablayout0 属性如下图所示：
4.1.1 组件名称
可自定义。
4.1.2 样式
可设置边框粗细、边框颜色、主题背景等，如下图所示：
4.1.3 Tab 轮播
勾选开启轮播后，tablayout0 中的 tab 会开启轮播，可以设置轮播间隔，默认为 1.8 s。
注：也可以通过添加初始化后事件来实现 Tab 轮播，请参见 JS 实现决策报表 Tab 块轮播
4.1.4 坐标尺寸
body 布局方式为绝对布局时，tablayout0 可调整组件大小。
4.2 tabpane0
tabpane0 属性如下图所示：
4.2.1 组件名称
可自定义。
4.2.2 样式模板
样式模板包含：默认、卡片式、锦旗、书签式、菜单式、五边形、梯形。如下图所示：
4.2.3 显示位置
Tab 位置可选择：上、下、左、右
4.2.4 背景／字体
自定义 Tab 标题背景、Tab 标题字号、字体等
4.2.5 文本方向
Tab 标题在 Tab 块中的方向，可选择横排、竖排
4.2.6 控件大小
调整 Tab 标题块的高度：
通过修改控件大小，可以调整 Tab 标题块的高度。
也可以通过拖拽来调整Tab标题块的高度，如下图所示：
注1：Tab 标题块纵向排列时设置也是如此，只不过设置高度变成了设置宽度。
注2：控件大小不可以超出 tablayout 的高度范围。
Tab 标题块隐藏：
设置控件大小为 0 或者拖动标题组件到上下线重合，即可隐藏 Tab 标题，如下图所示：
4.3 当前编辑 Tab
当前编辑 Tab 属性界面如下图所示：
4.3.1 控件名称
Tab 的控件名，默认为 Tab0，后面序号依次增长。
4.3.2 可见
「可见」按钮默认被勾选。取消勾选后，预览时该 Tab 不可见（包括 Tab 内的内容）。
取消勾选后当前 Tab 在设计器中状态如下图所示：
注：模板导出时，被隐藏的 Tab 不会被导出。例如：排在首位的 Tab 被隐藏，则导出时导出排在第二位的 Tab。
4.3.3 内边距
Tab 主体部分，默认都是自适应布局，可以设置内边距，默认上下左右都为 0；每个 Tab 可以设置不同的内边距。
4.3.4 样式-自定义
可以修改 Tab 初始、鼠标悬浮、鼠标点击的背景颜色。
4.3.5 组件间隔
和内边距一样，每个 Tab 主体部分可以设置各自的内部组件间隔。
4.3.6 标题
当前编辑的 Tab 的标题，可以修改当前编辑 Tab 的标题名，修改后设计区域会及时体现。
5. 多 Tab 加载逻辑编辑
在决策报表中点击模板>表单报表块自适应属性， 如下图所示：
注：更多自适应属性内容请参见：自适应属性
自适应属性中表格选择默认：
「表单报表块自适应属性」中表格选择默认时，后台将加载全部 Tab ，前端展示时只加载第一个 Tab 的前端元素，切换到第二个 Tab 再加载第二个 Tab 。
自适应属性中表格选择非默认：
如果报表块自适应为非默认的话 ，后台加载全部 Tab ，前端默认也会加载所有 Tab 。
6. Tab 布局提供的方法接口编辑
1）Tab 组件显示
可以通过 JavaScript 控制 Tab 布局显示哪个 Tab，当前控件选择 Tab 组件，添加一个初始化后事件：
this.options.form.getWidgetByName('cardlayoutname').showCardByIndex(index)注：cardlayoutname 为 Tab 块名称，默认为 tabpane0；index 为标题索引。
JS 示例请参见：超链切换 Tab 标签
2）Tab 标题隐藏
可以通过 JavaScript 控制部分 Tab 标题块隐藏，当前控件选择 Tab 组件，添加一个初始化后事件：
this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false)注：“Tab1”在模板中不能重名。当模板导出时，被隐藏的 Tab 不会被导出。
JS 示例可参见：JavaScript 实现隐藏 Tab 块标题
7. 索引编辑
| 序号 | 简介 | 参考文档 |
|---|---|---|
| 1 | 移动端 Tab 组件样式介绍，组件样式包含上菜单式、下菜单式、滑动式、联排式 | ［通用］Tab 组件多样化 |
| 2 | 单个 Tab 标题样式设置，支持 Tab 自定义显示隐藏 | ［通用］移动端 Tab 布局 |
| 3 | 通过 JS 隐藏 Tab 标题 | JS 实现隐藏 Tab 块标题 |
| 4 | 通过 JS 语句隐藏部分 Tab 标题 | ［通用］JS 隐藏部分 Tab 标题 |
| 5 | 通过数据库表中设置的字段值，控制决策报表的每个 Tab 块是否显示 | 数据库表字段控制 Tab 块隐藏 |
| 6 | 切换 Tab 时，参数面板中的部分参数隐藏 | JS 实现切换 Tab 显示/隐藏参数面板上的控件 |
| 7 | 点击报表块单元格的超级链接，实现 Tab 块的切换 | JS 实现点击超链切换 Tab 页 |
| 8 | 通过 JS 实现跳转到指定 Tab 页的效果 | ［通用］JS 跳转指定 Tab 块 |
| 9 | JS 实现点击查询后停留在当前查询的 Tab 页 | JS 实现点击查询后停留在当前查询的 Tab 页 |
| 10 | 多 Tab 的决策报表，使用 JS 实现固定时间间隔内自动循环跳转 | JS 实现决策报表 Tab 块轮播 |
| 11 | 提供更多 Tab 轮播效果，例如横向滚动效果、上下滚动等轮播效果 | 决策报表 Tab 块轮播特效插件 |