---
order: 2
navTitle: 选择面板
---
# 仪表板组件-选择面板

**选择面板**组件用来平铺展示多个选项，不仅可以切换[多页面板](../layout/panelbook.md)的页面，还可以通过选择不同的选项展示不同的数据。如使用选择面板展示表格中不同范围的数据：

![使用选择面板切换多页面板](./images/2021_08_31_18_13_19_364.gif)

示例地址：[字段灵活查询](https://demo.succbi.com/v5/bi/%E5%AD%97%E6%AE%B5%E7%81%B5%E6%B4%BB%E6%9F%A5%E8%AF%A2)

:::tip

**选择面板**与[下拉框](./combobox.md)都可以实现**选择**的功能，与下拉框不同的是，选择面板以选项的形式实现交互，适合单级维；若数据具有层次，建议使用下拉框的方式。

:::

## 使用选择面板切换多页面板{#switch}

**选择面板**搭配[切换多页面板](../../design/action/switch-panelbook.md)交互使用时，可以切换[多页面板](../layout/panelbook.md)的页面，具体步骤如下：

![使用选择面板切换多页面板](./images/2021_09_01_15_31_47_130.gif)

1. **制作多页面板**：预先将多页面板制作完成
2. **设置选择面板选项**：选中**选择面板**组件，在**数据**>**可选项**>**列表数据**中选择**枚举值**，并添加五条枚举值，分别对应多页面板的5个页面
3. **设置选择面板默认值**：为选择面板添加默认值为`涟漪（线）`，表示默认展示多页面板中名称为`涟漪（线）`的页面
4. **添加切换多页面板交互**：在**选择面板**的**交互**栏中添加**切换多页面板**交互，设置目标对象为`多页面板1`，目标面板为`事件源序号`，切换多页面板的具体介绍可参考文档[切换多页面板](../../design/action/switch-panelbook.md)交互。

示例地址：[自定义气泡动效](https://demo.succbi.com/v5/bi/bubble-layer_1)

## 使用选择面板过滤数据{#filter}

### 使用枚举值过滤数据{#enum}

**选择面板**组件的选项是**枚举值**类型时，可以通过对其他组件设置过滤条件来达到过滤数据的效果，如选择面板中提供`全国`、`湖北省`、`武汉市`三个选项，实现如下功能：

- 当选中`全国`时，仪表板中展示的是全国的数据
- 选中`湖北省`时，仪表板中展示的是湖北省的数据
- 选中`武汉市`时，仪表板中展示的是武汉市的数据

具体实现步骤如下：

![使用选择面板过滤数据](./images/2021_09_01_16_09_40_384.gif)

1. **设置选择面板选项**：选中**选择面板**组件，在**数据**>**可选项**>**列表数据**中选择**枚举值**，并添加三条枚举值，值与描述分别是：
   1. `420100`，`武汉市场主体查询`
   2. `420000`，`湖北省市场主体查询`
   3. `*`，`全国范围搜索`
2. **设置选择面板默认值**：为选择面板添加默认值为`武汉市场主体查询`，表示默认展示武汉市的数据内容
3. **在其他组件中对数据进行过滤**：选中明细表，在过滤器中添加一条过滤表达式`[企业基本信息].[登记机关]=[选择面板1].[值]`

示例地址：[字段灵活查询](https://demo.succbi.com/v5/bi/%E5%AD%97%E6%AE%B5%E7%81%B5%E6%B4%BB%E6%9F%A5%E8%AF%A2)

### 使用模型数据过滤数据{#table}

**选择面板**组件的选项来自**模型数据**时，可使用**选择面板**组件自带的**自动过滤**功能对其他组件的数据进行过滤，只需在**数据**>**过滤**中勾选自动过滤，并设置**影响范围**和**作用数据源**即可，具体的介绍可参考文档[下拉框](./combobox.md#table)。

![使用模型数据过滤数据-示例](./images/2021-09-02-15-27-28.png)

示例地址：[全国学生分布概览](https://demo.succbi.com/v5/bi/%E5%85%A8%E5%9B%BD%E5%AD%A6%E7%94%9F%E5%88%86%E5%B8%83%E6%A6%82%E8%A7%88)

## 选项数据{#data}

**选项**是**选择面板**组件使用的基础，**数据**>**可选项**>**列表数据**属性提供了设置选项的入口，一般区分为两种：

![选择面板-选项数据](./images/2021-09-01-16-29-27.png)

1. **枚举值**：一一列举每一种选项，需要在**数据**>**可选项**>**枚举值**中打开**编辑枚举值**对话框进行设置
2. **来自模型数据**：需要提前在**数据**>**字段**中引用模型表的某个字段，然后在**列表数据**的下拉列表中进行选择，设置与下拉框组件相似，可参考文档[下拉框](./combobox.md)

选择面板还允许同时勾选多个选项，在**数据**>**可选项**中勾选**允许多选**即可。

## 属性介绍{#property}

### 排列方式{#arrange}

**选择面板**的选项支持设置排列方向，可选项有**横向**、**纵向**，在**样式**>**布局**>**排列方式**中选择。

![选择面板-排列方式](./images/2021-09-01-16-30-13.png)

### 绕排{#winding}

**选择面板**排列方式为**横向**时，还支持设置是否绕排，当设置为自动绕排后，选项一行显示不下时，会自动换行排列，此时可以勾选**按列对齐**，即按列自动对齐排列，并设置**固定列数**，表示一行显示几列，需要输入大于0的整数，如2表示显示2列。

### 启用展开收起{#expand-collapse}

当选项较多时，可以收起部分选项，需要在**样式**>**布局**中勾选**启用展开收起**。可以设置默认是收起的效果，勾选**默认收起**属性即可，可设置收起时默认的**显示行数**，即收起时显示的选项行数，默认为1，即只显示一行。