---
title: SelectInput 筛选输入框
description: 综合了输入框和下拉的功能。
isComponent: true
usage: true
spline: message
author: swimly
---

## 基本用法

- 通过 `value`、`v-model`、`defaultValue`可绑定组件初始选中项，其中`v-model`绑定值为响应式 `defaultValue`绑定值无法更改
  ，推荐使用`v-model`。
- 通过`allowInput` 来控制是否可以输入值。
- 通过`multiple` 可以设置是否呈现多选模式

{{ base }}

### 有前置 && 后置内容

- 前置内容使用 `label` 自定义。
- 后置内容使用 `suffix` 自定义。
- 前置图标使用 `prefixIcon` 自定义。
- 后置图标使用 `suffixIcon` 自定义。

{{ prefixSuffix }}

### 不同状态

使用 `status` 和 `tips` 控制状态和提示文案，支持

{{ status }}

### 自定义下拉框宽度

- 下拉框宽度规则：下拉框宽度默认和触发元素宽度保持同宽，如果下拉框宽度超出输入框组件会自动撑开下拉框宽度，但最大宽度不超
  过 `1000px`。
- 也可以通过 `popupProps.overlayStyle.width` 自由设置下拉框宽度。`popupProps.overlayStyle` 类型为函数时，可以更灵活地动
  态控制下拉框宽度。

{{ adjustWidth }}

### 选中项数量超出

使用 `excessTagsDisplayType` 控制标签超出时的呈现方式：横向滚动显示`scroll` 和换行显示`break-line` ，默认为换行显示。

{{ overflow }}

### 折叠选中项

选中项数量超过 `minCollapsedNum` 时会被折叠，可使用 `collapsedItems` 自定义折叠选项中的呈现方式，默认值为 `+N`，也可自定
义 `value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示总标签数量。

{{ collapse }}

### 自定义选中项

使用 `valueDisplay` 或者 `tag` 自定义选中项。

{{ customItem }}

### 无边框模式

`borderless` 用于控制是否呈现为无边框模式。

{{ borderless }}

### 自动宽度的单选筛选器

`autoWidth` 用于控制是否呈现为自适应宽度。

{{ autowidth }}

### 自动填充

可使用 `SelectInput` 自由定制任何风格的自动填充筛选器。

{{ autofill }}
