1.1 预期效果

通过数据库表中设置的字段值，控制FVS中每个 标签页是否显示，如下图所示：

数据库表字段：SITUATION 字段的值控制 Tab 是否显示。

效果展示：一共有 4 个标签页：春、夏、秋、冬，前端展现时只显示其中 2 个。

1.2 实现思路

在数据库表中添加控制标签页是否显示的权限值，给表格组件添加 JS 事件来实现。

2.1 准备模板

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

2.2 设计模板

2.2.1 添加 Tab 组件

1)点击模板画布右侧「容器>Tab」，将 Tab 组件添加到画布中，新增 4 个标签页。每个标签页中均拖入一个表格组件。将 Tab 组件名称改为季节。

如下图所示：

2）给标签页标题分别设置为「春、夏、秋、冬」。表格内容可自行设置。以春为例，如下图所示：

2.3 添加JS事件

1）选中任意一个表格组件，添加一个初始化后事件。下面以标签页春的表格 Spring 为例，如下图所示：

2）事件中，首先添加一个参数 a  ，参数值为公式 ：split(SQL("FRDemo","SELECT TYPE FROM SEASON WHERE SITUATION='隐藏'",1),",")

公式说明：通过 SQL 查询和 split 分割公式将需要字段值为「隐藏」的 Tab 块标题存成一个数组。获取到TYPE中为隐藏的值，并形成数组：[秋，冬]。

再输入 JavaScript 代码：

setTimeout(function(){
for(var i = 0; i < a.length; i++) { 
    for(var j=0;j<= a[i].length;j++){ 
duchamp.getWidgetByName('季节').getPage(a[j]).setVisible(false);
    }
}

2.4 预览效果

2.4.1 PC 端

模板完成后，点击右上角「预览」。效果如 1.1 节预期效果所示。

2.4.2 移动端

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

点击下载模板：FVS中实现数据库表字段控制标签页隐藏.fvs

注：用户使用该模板时需要先新建数据库表。