---
order: 26
navTitle: 选择列表
---
# SuperPage组件-选择列表

SuperPage提供了选择列表组件，能以树的形式展示数据，可用于提交或过滤数据。

![选择列表](./images/treeSelector.gif)

示例地址：[选择列表](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E9%80%89%E6%8B%A9%E5%88%97%E8%A1%A8)

## 使用选择列表组件过滤数据{#filter}

使用选择列表组件过滤数据有2种方式：

- **自动过滤数据：** 勾选数据中**自动过滤**，并绑定**条件字段**，如`销售单位`，此时系统会自动以选择列表选中的值为过滤条件过滤数据，常与[列表](../data/list.md)组件搭配使用，具体可参考[下拉框-自动过滤](./combobox.md#autofilter)
- **过滤数据模型的数据：** 当选择列表中的数据与模型表的数据无关联时，即使用枚举值，此时若需要过滤数据则可在模型上设置过滤条件，可参考文档[使用勾选框过滤数据](./checkbox.md#filter)

## 使用选择列表组件提交数据{#submit}

选择列表组件的提交数据与其它输入组件提交数据操作方式一致，勾选**提交数据**属性并设置**绑定字段**属性，可以将选中或勾选的信息提交到数据库中，具体可参考[文本输入组件](./textinput.md#submit)。

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

## 可选项设置{#options}

选择列表的显示内容需要设置可选项，有如下两种设置方式：

1. **枚举值**：当模型表原有数据不满足需求时，可以使用枚举值手动添加数据，具体操作可参考下拉框中的[下拉列表为枚举值](./combobox.md#options)
2. **模型表**：当选择列表的数据在模型表中时，可直接选择对应的模型表，在**可选项**的下拉列表中会显示当前页面中添加的数据模型以及模型中对应的关联维表，并且可以设置列表选项的显示内容及节点属性等

![模型数据](./images/2021-01-07-15-49-38.png)

- **选择列表内容设置**：选择列表内容设置与下拉框中[下拉内容设置](./combobox.md#field)一致，同时可以勾选**允许搜索**属性，勾选后顶部出现搜索框可对列表选项进行搜索
- **根节点设置**：当**可选项**设置的数据表带有层次时，可对根节点进行设置，与下拉框中的[根节点设置](./combobox.md#root)一致
- **选择列表内容设置**：选择列表内容设置与下拉框中[下拉内容设置](./combobox.md#field)一致，同时可以勾选**允许搜索**属性，勾选后顶部出现搜索框可对列表选项进行搜索
- **根节点设置**：当**可选项**设置的数据表带有层次时，可对根节点进行设置，与下拉框中的[根节点设置](./combobox.md#root)一致
- **维项过滤设置**：使用**维项过滤**属性可对选择列表选项内容进行过滤，与下拉框中的[维项过滤设置](./combobox.md#dimension-filtering)一致，同时选择列表还支持隐藏子节点为空的父节点，勾选**隐藏空的父节点**属性即可
- **显示最大级次**：选择列表中显示带有层次的数据时，可设置**显示最大级次**属性，与下拉框中[显示最大级次](./combobox.md#level)一致
- **显示统计数**：在选择列表中可显示按**统计字段**统计的选项数据总数，与下拉框中的[显示统计数](./combobox.md#statistics)一致，同时选择列表提供了按照统计字段排序的功能，在**显示统计数**>**排序**属性设置即可

## 显示多列数据{#display-data}

选择列表支持显示多列数据，形成一个能展开折叠、搜索、勾选的可操作列表。在**属性栏**>**选择列表**>**可选项**中勾选**显示多列数据**属性，并对**子项设置**即可，子项设置与列表设置列类似：

![显示多列数据](./images/2021-01-07-16-09-46.png)

- **设置显示列**：选择列表根据需求添加显示列，操作可参考列表组件的[设置显示哪些列](../data/list.md##manifest)，可以勾选**是否参与搜索**，若勾选则此列在搜索范围内，与之匹配的内容会被特殊颜色标注
- **列的样式设置**：可分别对列的标题行与数据行进行样式设置，可参考列表组件的[列的样式设置](../data/list.md#line-style)
- **根据条件显示隐藏列**：可根据条件显示隐藏不同的列，可参考列表组件的[根据条件显示隐藏列](../data/list.md#condition)
- **列的交互设置**：选择列表中也可为列设置事件交互，可参考列表组件的[列的交互设置](../data/list.md#line-setting)