---
order: 5
navTitle: 字段过滤
---
# SuperPage组件-字段过滤（移动设备）

在移动端可以使用移动字段过滤组件过滤数据。

<img src="./images/filterbar.gif" width = 30%/>

示例地址：[字段过滤](https://demo.succbi.com/v5/DEMO/app/ap.app/index.mpg?id=%E5%AD%97%E6%AE%B5%E8%BF%87%E6%BB%A4)

## 使用移动字段过滤组件过滤数据{#filter}

字段过滤组件过滤的是数据模型的数据，将作用到所有使用此数据模型的组件。使用时需要为字段过滤组件绑定数据模型，并搭配其他展示数据的组件一起使用。以搭配列表组件过滤企业基本信息为例，如下是具体操作步骤：

![示例](./images/zdgl.gif)

1. **使用移动字段过滤组件**：在**组件区**>**移动**中将**字段过滤**组件拖入到布局中
2. **绑定字段过滤数据并设置字段**：在**字段过滤**>**数据**下选取添加的数据模型，并点击**设置字段**添加[过滤字段](#setting-field)及[字段属性设置](#properties)、或[添加操作按钮](#operate-button)
3. **设置自动过滤**：在**字段过滤**>**数据**中勾选**自动过滤**

## 过滤字段设置{#setting-field}

### 显示哪些字段{#display}

自动字段过滤组件不会自动将数据集字段显示在字段列表中，需要在**属性栏**>**字段过滤**>**数据**下绑定数据模型后，点击**设置字段**可设置字段过滤中显示的字段。添加的字段，根据字段类型提供的属性有差异，参考[字段属性设置](#properties)。\
在弹出的对话框中，可以点击**添加**按钮添加字段；或点击下拉菜单，选择数据集中的字段，也可以点击**复制**按钮，进行添加：

![显示字段](./images/2021-03-25-16-56-49.png)

:::tip
字段标题默认`字段1`、`字段2`，若选择了模型表中的字段则标题为字段名称，在字段属性中修改字段**标题**即可
:::

### 字段属性设置{#properties}

每个字段都有2个默认属性：

- **字段**：数据过滤字段，下拉列表中显示的是引入的数据模型所有字段
- **标题**：显示在顶部的选项标题，当选择了字段后，标题默认为字段名称，可自定义修改

字段类型不同，属性之间存在差异，分为如下几类：

1. 设置了[关联表](../../../../data-gov/model/README.md#associated-table)的字段：可以设置**维项过滤**、**显示方式**、是否**允许多选**，**显示全部**等，可参考[下拉框](../input/combobox.md#settings)
2. 日期字段：无其他属性，通过日期选择框的形式选择一个日期进行过滤
3. 数值型字段：默认是输入区间，可设置**最低输入区间提示**、**最高输入区间提示**
4. 其他字段：字段是字符串、没有设置[关联表](../../../../data-gov/model/README.md#associated-table)、不是日期角色等，只能输入关键字进行过滤

也提供了一些通用属性设置：

- **默认值**：默认的筛选条件设置，可以下拉选择固定值或者[表达式](../../../../exp/README.md)获取
- **占位符**：当字段为非数值型时，可设置占位符。当未输入内容时，默认显示的内容
- **显示方式**：当字段有[关联维表](../../../../data-gov/model/README.md#associated-table)时，选项的显示方式
  - 自动：条目少于50时自动平铺，否则列表显示
  - 列表：支持单级和多级
  - 平铺：可一级分组

![字段属性](./images/2021-03-25-16-58-16.png)

### 搜索设置{#search}

当字段类型设置了[关联表](../../../../data-gov/model/README.md#associated-table)时，选择过滤条件时可对维项列表数据进行搜索，勾选**允许搜索**即可，默认不勾选：

![搜索](./images/2021-03-25-16-59-01.png)

- **搜索框占位符**：搜索框内部当未输入内容时，默认显示的内容
- **最近搜索**：根据搜索时间降序显示，最近一次搜索的维项排在最前面。有搜索内容时才显示最近搜索，没有不显示
- **常用**：默认显示选择频率排名前10的，根据使用频率降序显示
- **最近搜索风格**：显示最近搜索的的内容上的样式风格，这里共用的是[文本输入](../input/textinput.md)组件的风格，如果需要增加，需要在文本输入的样式中进行管理

## 添加操作按钮{#operate-button}

### 添加排序{#rank-menu}

排序有两种体验，一种是多个字段排序选择，一种是按某个字段排序。排序菜单用来实现前者，排序按钮是实现后者。

- 排序菜单：在排序菜单中用于添加多个不同的排序字段，对数据进行动态排序。排序菜单可以添加到**字段列表**中和[按钮](#button)下面，排序菜单下面只能添加**排序按钮**
- 排序按钮：根据排序依据对字段进行排序，出现在字段列表上时是带有上下箭头的按钮，不能直接添加到[按钮](#button)下面，只能添加到[排序菜单](#rank-menu)和字段列表中

**排序依据设置**

- **默认值**：默认排序的依据，可选**无**、**升序**、**降序**
- **排序方向**：**降序、升序切换**、**升序、降序切换**、**仅升序**、**仅降序**

### 添加按钮{#button}

点击按钮可以执行交互动作，按钮下面添加[过滤字段](#setting-field)或[排序菜单](#rank-menu)。如添加一个更多按钮，在按钮下方添加多个过滤字段，通过按钮实现展开收起的折叠效果。

![添加按钮](./images/2021-03-25-17-04-18.png)

## 过滤条件重置{#reset}

当字段过滤条件中有筛选条件时可点击**重置**按钮清空已选择的条件，可自定义重置按钮的显示文字，默认标题为**重置**。当字段过滤中未选择任何筛选条件时，重置按钮不可点击。在**属性栏**>**字段过滤**>**高级**下输入重置按钮的标题内容即可：

![过滤条件](./images/2021-03-25-17-05-04.png)

## 字段过滤布局设置{#layout}

当字段过滤组件中字段列表较多，超出组件大小时，会自动进行缩放排列，可添加横向滚动，拖动滚动条查看所有的字段列表，在**属性栏**>**字段过滤**>**高级**下勾选**横向滚动**即可：

![布局设置](./images/2021-03-25-17-05-43.png)