---
order: 9
navTitle: 下拉框
---
# SuperPage组件-下拉框

使用下拉菜单展示或选择内容，可用于提交或过滤数据。

![下拉框示例](./images/2022-05-23-17-53.gif)

示例地址：[下拉框](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E4%B8%8B%E6%8B%89%E6%A1%86)

## 使用下拉框组件过滤数据{#filter}

使用下拉框组件过滤数据时有2种方式：

- [设置数据模型的过滤条件](#model-filter)
- [自动过滤](#autofilter)

### 过滤数据模型的数据{#model-filter}

当下拉框的列表数据未与模型表的数据关联时，即使用枚举值，此时需要在模型上设置过滤，可参考文档[勾选框-使用勾选框过滤数据](./checkbox.md#filter)。

### 自动过滤{#autofilter}

下拉框组件自动过滤的是数据模型的数据，将作用到所有使用此数据模型的组件。使用时需要为过滤的数据绑定条件字段，并搭配其他展示数据的组件一起使用。以搭配[列表](../data/list.md)组件搜索大区销售信息为例，如下是具体操作步骤：

![自动过滤](./images/2022-05-20-10-39-42.gif)

1. **使用下拉框组件**：在**组件区**>**输入**中将**下拉框**组件拖入到布局中
2. **绑定下拉框的数据**：在**属性栏**>**下拉框**>**可选项**中下拉选择`区域编码`，设置属性为`大区`，更多的属性设置见[下拉列表为模型数据](#model-data)
3. **设置自动过滤**：在**属性栏**>**下拉框**>**过滤**中勾选自动过滤，在**条件字段**中选择`大区`
4. **设置默认值**：在**属性栏**>**下拉框**>**输入**中指定默认值为`华北`

## 使用下拉框组件提交数据{#submit}

下拉框输入组件的**提交数据**和其它输入组件**提交数据**操作方式一致，勾选**提交数据**属性并设置**绑定字段**属性，可以将输入信息提交到数据库中，具体可参考[文本输入组件](./textinput.md#submit)。\
当多选时提交的多个值之间是以逗号分隔存储在字段中，若展示数据时需要与[关联表](../../../../data-gov/model/README.md#associated-table)的数据关联起来，则需要给字段设置[字段角色](../../../../data-gov/model/field-role.md#values)为**多值**。

## 下拉列表为枚举值{#options}

当下拉框的数据需要手动添加时，可以选择枚举值，在**可选项**下选择**枚举值**后，点击**编辑枚举值**，可添加下拉框的数据。点击**下面插入行**即可新增枚举项，枚举值由**值**和**描述**组成：

![枚举值](./images/2020-12-14-18-51-14.png)

## 下拉列表为模型数据{#model-data}

当下拉框的列表数据在已有模型表中存在时，可直接选择对应的模型表，在**可选项**的下拉列表中会显示当前页面中添加的数据模型以及模型中对应的[关联表](../../../../data-gov/model/README.md#associated-table)，并且可以设置列表选项的显示内容及节点属性等：

![模型数据](./images/2020-12-14-18-54-59.png)

### 下拉内容设置{#field}

下拉列表的内容默认是维表的主键信息和默认的层次信息，也可以自定义下拉列表的内容，在**下拉框**>**可选项**>**属性**中设置即可。\
当**可选项**中设置的是维表时，在**属性**的选项中会列出该维表的所有属性，选择某个属性后，下拉框组件的下拉列表会显示该属性的内容，如只显示大区的数据，则在**属性**中选择为`大区`。\
当自定义属性后，根节点和显示最大级次的设置将不起作用。

![内容设置](./images/2020-12-16-10-36-21.png)

:::tip 下拉属性

- 当选择的模型为多主键且设置了周期快照，需指定属性为某个字段。
- **属性**下拉列表显示的是该模型的所有维度字段，下拉框组件的数据是按照维度字段去重显示。
  :::

### 根节点设置{#root}

当**可选项**设置的是数据表且带有层次时，可以设置显示哪些根节点，以及是否显示根节点，见[下拉框联动](#linkage)。设置方式如下：

- **根节点**：当设置了根节点内容后，下拉列表只显示该节点下的数据。输入的内容是可选项中数据表的主键信息
  - 限制显示单个节点：例如只显示**湖北省**的节点，内容输入为`420000`
  - 限制多个节点：限制多个节点需要使用[ARR](../../../../exp/func/json/ARR.md)函数。例如显示**湖北**和**湖南**节点，内容输入为`ARR(420000,430000)`
- **显示根**：勾选后，则会将根节点属性中设置的节点显示在列表中。默认不显示

![根节点](./images/2020-12-16-16-53-17.png)

### 维项过滤设置{#dimension-filtering}

**维项过滤**是一个过滤条件，帮助下拉框组件缩小数据显示范围，只将满足条件的维成员显示在下拉框中，使用维表中的字段即可。如绑定销售单位维表的下拉框中，会将该维表中的字段列在数据中，如表达式为`[大区名称]!='华北'`，即在下拉框中不显示华北。

当[属性](#field)选择为【字段名称】时，维项过滤可以过滤哪些字段不显示，语法如下：

```md
[字段名称] = 'XSDW' // 过滤物理字段名
[字段名称].[名称] = '销售单位' // 过滤逻辑名
[字段名称].[名称] = '销售单位, 销售计划' // 过滤多个逻辑名
```

示例地址：[企业查询-输出字段](https://demo.succbi.com/v5/DEMO/app/ap.app/%E6%A1%88%E4%BE%8B/%E4%BC%81%E4%B8%9A%E4%BF%A1%E6%81%AF%E8%87%AA%E5%8A%A9%E6%9F%A5%E8%AF%A2/%E4%BC%81%E4%B8%9A%E4%BF%A1%E6%81%AF%E8%87%AA%E5%8A%A9%E6%9F%A5%E8%AF%A2.tpg?id=%E4%BC%81%E4%B8%9A%E6%9F%A5%E8%AF%A21)

### 显示最大级次{#level}

当在下拉列表中显示的是一个带有层次的数据时，可以设置**显示最大级次属性**，限制树形显示到哪一个级次。该属性只能输入数字，即0、1、2...，其中0表示最大级次。

### 显示统计数{#statistics}

在下拉框的选项列表中可统计该选项对应的数据总数，勾选**显示统计数**属性，并选择了**统计字段**后，在下拉框组件的列表中会显示该字段的统计数字。如**产品类型**下拉框，勾选**显示统计数**之后，会在每个选项后显示每类产品对应的产品个数。

![统计数](./images/2020-12-16-17-00-25.png)

- 可隐藏统计数为0的选项，只需要勾选**隐藏统计数为0的项**即可。
- **统计字段**可以选择可选项中设置的数据模型字段，也可以选择该spg页面中添加的其它数据模型字段。如果选择了其它数据模型字段，该数据模型需要和可选项中选择的数据模型粒度是一致的。

## 下拉框操作设置{#settings}

可以通过下拉框设置来修改下拉框数据的可选设置：

![操作设置](./images/2020-12-17-18-07-10.png)

- **默认值**：默认的筛选条件设置，可以下拉选择固定值或者[表达式](../../../../exp/README.md)获取
- **允许多选**：勾选该选项后，可以同时勾选或选中多个下拉框中的节点，允许多选后可设置**显示已选个数**及**显示“全部”**
- **允许清空**：勾选后，允许删除下拉框中已选择的数据。若未勾选，当勾选了数据后只能通过选择其他选项来替换已选择的数据
- **只选叶子节点**：勾选该选项后，点击根节点只能展开根节点并不能被选中，且只能选中或勾选无叶子节点的子节点
- **显示已选个数**：当勾选**允许多选**，可选择**是否显示已选个数**。勾选后，当下拉框中选择了数据后，会在下拉框中显示已选择的选项个数
- **显示“全部”**：当勾选后，下拉框的列表中会有一条“全部”的选项，选择**全部**后会勾选所有的选项

### 自动选中第一项{#first-item}

勾选后下拉框自动选中列表数据里面的第一项，此属性与**默认值**属性互斥，**默认值**的优先级更高，即设置了**默认值**之后，**自动选中第一项**不生效。

![选中第一项](./images/2020-12-17-16-23-17.png)

## 应用场景{#scenarios}

### 下拉框联动{#linkage}

使用下拉框可实现参数联动，如`大区-省-市-门店`联动，在选择了某大区后，省的下拉列表中只会显示该大区对应的省，以及市和门店也只显示对应根节点下的数据：

![联动](./images/2022-05-23-18-03-23.gif)

**实现方式：**

场景一：大区-省-市-门店联动，默认选中第一项

1. 设置下拉框**省**的[维项过滤](#dimension-filtering)表达式为`[大区]=[大区联动1].[值]`
2. 设置下拉框**市**的[根节点](#root)为`[省联动1]`、设置下拉框**门店**的[根节点](#root)为`[市联动1]`

场景二：大区-省-市-门店联动，前一个组件没有选择时，后面的组件不可选

1. 设置下拉框省的禁用条件为`[大区联动2].[值]=""`

场景三：大区-省-市-门店联动，前一个组件没有选择时，后面的组件是隐藏的

1. 设置下拉框**省**的显示条件为`[大区联动3].[值]!=""`

### 动态显示下拉框数据{#display}

下拉框可以设置动态的显示隐藏条件和禁用条件，这样可以动态决定某些数据是否显示及下拉框是否可用，例如根据登录用户不同决定某个菜单是否显示。通过设置下拉框的**显示**>**显示条件**属性或者**禁用**>**禁用条件**属性即可实现。