---
order: 8
navTitle: 单选/多选面板
---
# SuperPage组件-单选/多选面板

SuperPage提供了选择面板，包括单选面板和[多选面板](#multiple)，可以过滤或提交数据。[多选面板](#multiple)与单选面板的功能一致，只需要勾选**允许多选**即可。本文以单选面板为例，介绍选择面板的用法。

![单选面板示例](./images/2020-12-23-16-38-51.png)

示例地址：[单选面板](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E9%80%89%E6%8B%A9%E9%9D%A2%E6%9D%BF)

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

使用单选面板组件过滤数据有2种方式：

- **自动过滤数据**：当单选面板绑定了字段，那么可以启用**自动过滤**，此时系统会自动以单选面板选择的值为过滤条件，如【企业类型】单选面板，选择对应企业类型后即可自动过滤查询出来的数据。勾选**自动过滤**属性并设置**条件字段**属性即可，具体可参考[使用下拉框过滤数据](./combobox.md#filter)。
- **过滤数据模型的数据**：当过滤条件比较复杂，或者单选面板的值没有绑定字段，此时需要通过[表达式](../../../../exp/README.md)编写过滤条件进行过滤，可参考文档[勾选框-使用勾选框过滤数据](./checkbox.md#filter)。

## 使用单选面板提交数据{#submit}

单选面板提交数据的方式与其它输入组件一致，需要勾选[提交数据](../../design/action/submit-data.md)并设置**绑定字段**，具体可参考文本输入组件。具体可参考[文本输入组件](./textinput.md#submit)。

## 选项数据{#data}

### 来自模型数据{#model-data}

当单选面板的选项数据在已有模型表中存在时，在**可选项**的下拉列表中选择对应的模型表即可，并且可以设置选项的显示内容及节点属性等，与下拉框组件属性设置一样，可参考文档[下拉框](./combobox.md)。

![模型数据](./images/2020-12-21-14-27-36.png)

### 枚举值{#options}

如果无法从数据模型中获得可选值，那么也可以自行编辑枚举值。在**可选项**下选择**枚举值**，然后点击**编辑枚举值**：

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

## 多选面板{#multiple}

多选面板与单选面板的使用方法一致，只是允许同时选择多个选项，及选择框的样式不一致。使用多选面板有2种方式：

![多选面板](./images/2020-12-17-17-01-02.png)

- 从**组件区**>**输入**分组下拖入**多选面板**到页面中
- 将单选面板设置**允许多选**：在**选择面板**>**可选项**中勾选**允许多选**即可

:::tip
当多选时提交的多个值之间是以逗号分隔存储在字段中，若展示数据时需要与[关联表](../../../../data-gov/model/README.md#associated-table)的数据关联起来，则需要给字段设置[字段角色](../../../../data-gov/model/field-role.md#values)为**多值**。
:::

## 属性介绍{#properties}

### 横向排列{#horizontal}

单选面板的排列方式默认为**横向**，当为**横向**时可设置绕排和按列对齐：

![横向排列](./images/2020-12-22-14-12-15.png)

- **绕排**：设置为**自动绕排**后，选项一行显示不下时，会自动换行排列。也可以选择**不绕排**显示选项
  - **按列对齐**：设置**自动绕排**后，可以设置选项按列自动对齐排列
  - **固定列数**：设置了按列对齐后，可以设置一行显示几列，输入大于0的整数，2表示显示2列

| 自动绕排 | 按列对齐 |
| -------- | -------- |
| ![自动绕排](./images/2020-12-22-14-20-47.png) | ![换列对齐](./images/2020-12-22-14-22-41.png) |

### 纵向排列{#vertical}

在**属性栏**>**样式**>**面板**下可设置单选面板的排列方式为**纵向**排列：

![纵向排列](./images/2020-12-21-17-57-50.png)

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

当选项较多时，可以收起部分选项，勾选该属性即可。可以设置默认是收起的效果，勾选**默认收起**属性即可，可设置收起时默认的**显示行数**：

- **显示行数**：收起时，显示的选项行数，默认为1，即只显示一行，输入大于0的整数即可

![展开收起](./images/2020-12-22-14-16-55.png)

### 选项面板样式设置{#optional}

在**属性栏**>**样式**>下可设置面板和选项的样式：

![样式设置](./images/2020-12-17-17-22-28.png)

- **面板**：包括填充、边框、内边距等样式设置
- **选项**：可以设置选项文字的字体、填充、边框、圆角、边距等，也可以设置是否**显示勾选图标**
  - **显示勾选图标**：当勾选后在选项前会有一个可勾选的框，选择选项时可点击勾选框或者选项标题，若未勾选，则只显示选项标题，点击选项标题即代表选中。默认勾选该选项

## 单选面板、下拉框、选择列表区别介绍{#difference}

单选面板、[下拉框](./combobox.md)、[选择列表](./treeselector.md)表输入组件的作用一致，区别在于数据的展现形式和应用场景不一致：

| 组件  | 展示方式 | 应用场景  |
| --- | --- | --- |
| 单选面板                      | 平铺     | 适用于选项较少的数据，如价格档次等                 |
| [下拉框](./combobox.md)       | 下拉列表 | 适用于展示有层次结构的数据，如销售单位、行政区划等 |
| [选择列表](./treeselector.md) | 列表     | 与下拉框类似，可展示有层次结构的数据               |