> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 下拉筛选

> 该页面介绍了下拉筛选功能的设置方法，包括单选、多选配置，模糊搜索（注意3.0版本移动端不支持），以及如何区分显示字段与实际查询字段。还详细说明了从选择组件到设置样式等各个步骤的操作指南，如配置数据集、选择值字段和显示字段的区别、设置默认值及条件过滤等内容。

## 1. 功能简介

下拉筛选可以实现【单选】、【多选】的设置，并能在输入框中模糊搜索，同时可以设置显示字段以实现用户所见字段和实际查询字段的区分（如显示部门名称，使用部门编码查询）

**注：3.0版本报表移动端不支持模糊搜索**

同时还支持【**标签**】模式，实现标签筛选的效果（效果图如下）

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625971229212-a6cdc3b7-1951-4379-9e4e-3c47aff3e0b1.png)
</Frame>

## 2. 操作步骤

### 2.1 选择组件，配置数据集

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963183044-31d29c2c-9c22-4f16-837c-024a47dd83b2.png)
</Frame>

选择组件、数据集

### 2.2 选择字段（值字段和显示字段）

**注：值字段和显示字段的区别**

值字段：向其他组件查询时的传输字段（如下图，和下方组件联动时传输的是“价格”）

显示字段：用户下拉时展示和选择的字段（如下图，对用户来说显示的是“产品名”）

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963294074-e7521222-86f5-44a6-9f59-b1187f819671.png)
</Frame>

设置字段数据

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963338724-9c6f12d7-5eba-497b-ab26-b821c00a3957.png)
</Frame>

展示效果

### 2.3 设置默认值

**（1）默认值是设置的显示字段的默认值**

**固定值**

* 下拉选择已有内容（搜索）
* 可以直接输入一个文本，并点击 Enter 输入

**变量**

* 包括登录者信息变量（工号、部门名称、所属公司编号、部门编码）、其他变量

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963598491-cc991f46-a924-458a-a232-15dedcc2ec96.png)
</Frame>

设置默认值

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963660119-75ad3415-463d-48e6-87c3-62b0baa96601.png)
</Frame>

登录者信息变量

### 2.4 条件过滤

当筛选数据的时候某些数据无需参与筛选，可以进行条件过滤，设置了条件过滤后就只会展示出被过滤后的数据

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963688640-8cde4ec9-3ac6-4f52-b1b7-21ccf4f4ad41.png)
</Frame>

#### 2.4.1 过滤方式

过滤方式有 2 种：组件内过滤、筛选器过滤

组件内过滤：选择表单中的字段进行设置过滤条件

筛选器过滤：是用报表中的筛选组件进行过滤

**注：若设置了筛选组件，同一报表中与筛选组件同一数据集的图表组件过滤条件会自动勾选筛选器过滤**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963716495-377b0a62-75d9-40e9-ae9d-05d89f1687c0.png)
</Frame>

#### 2.4.2 过滤值取值范围

取值范围有等于、包含、小于等于、大于等于、大于、小于等等，可以根据自身需求选定即可

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963763743-82ddcc76-3909-422e-8586-683c4ddfec02.png)
</Frame>

#### 2.4.3 过滤值配置

过滤的值支持固定值，登录者信息变量值、公式

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639963815732-7a169a95-bad9-4c09-a878-b516a93a48d7.png)
</Frame>

#### 2.4.4 实例

例如：库存表数据展示，我只想筛选出数量大于 1 的产品，如下配置：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639964001540-f459ec05-72d4-4647-812c-ba6a91194f71.png)
</Frame>

效果展示：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639964528937-0dae8798-5e6c-47d7-ab39-c4b6196cd50e.png)
</Frame>

### 2.5 设置样式

#### 2.5.1 查询方式

**模式多选**：点击后则用户可以多选

**必填**：开启后该下拉筛选项就要必填

**标签模式**：展示为按钮筛选的模式，具体样式见下图，如个数太大超过100个，则**最多展示前100个值**

* 【最大宽度】可以固定每个选项的宽度，如不设置按照文本大小自适应

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639964917842-cbd54adf-ac2f-4c3d-8cbf-a747ff166256.png)
</Frame>

查询方式

#### 2.5.2 标题

【显示标题】：开关，默认打开，如关闭下方标题设置均同步隐藏

【标题名称】：该筛选项的标题名称

【标题提示】：鼠标移到标题上会有个小叹号，起到提示的效果

【标题位置】：上方、左侧、内部，默认上方

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639964965930-2a3aa50c-8fe6-4c17-93da-0ccb5e61e919.png)
</Frame>

设置标题

#### 2.5.3 内容

占位提示：输入框内的提示

无选项文案：当该筛选项无数据时，在访问页面点击下拉筛选时的提示，如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639965219255-fcceee50-2139-4fd3-9148-f0f43619e418.png)
</Frame>

设置内容

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639966428668-75a517f8-c133-45a6-9531-3e4cb8a04552.png)
</Frame>

展示效果

#### 2.5.4 整体样式

【状态】：有普通、禁用、只读、隐藏

【最大宽度】：默认446，为提升用户体验会根据页面大小对筛选器宽度自适应，但自适应时如超过最大宽度则不会继续加宽

【整体尺寸】：默认中，可以自行选择小、中、大

【清除按钮】：可以设置是否一键清除，在输入框后面会有个 X 按钮

【下拉等宽】：开关，默认关闭，如开启下拉等宽，下拉筛选项和筛选器输入框宽度一致

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639966470578-f8178b83-0580-4d30-926f-bf0f2222377b.png)
</Frame>

整体样式
