---
title: Select 选择器
description: 用于收纳大量选项的信息录入类组件。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

选择器可通过`l-select-option`来定义下拉选项列表，也可通过`options`来进行定义。

> 提示：还可以通过`valueType`来定义选中值类型，可选：`value`，`object`，默认为`value`。

{{ base }}

## 自定义别名

当使用`options`的时候，拿到的数据结构和上述不同的时候，就可以通过`keys`来设置对应关系。

{{ keys }}

## 无边框模式

通过`bordered`可设置无边框模式，通过`autoWidth`可设置下拉框的宽度跟随内容自动撑开

{{ autowidth }}

## 快捷清空

通过 `clearable`属性可定义选择器框右侧的清空图标。

{{ clearable }}

## 前置图标

通过`prefixIcon`可用来设置下拉选择框前面的图标内容，当然，利用插槽的方式还可以用来设置更为复杂的内容。

{{ prefixIcon }}

## 是否显示箭头

通过`showArrow`控制下拉框右侧的向下箭头是否显示。

{{ showArrow }}

## 不同大小

通过`size`可设置下拉框的大小尺寸，可选：`small`，`medium`，`large`，默认为：`medium`。

{{ size }}

## 不同状态

通过`status`可设置下拉框的不同状态，可选：`default`，`success`，`warning`，`error`，默认为：`default`，还可以通
过`tips`设置提示信息，并会跟随改变样式。

{{ status }}

## 多选模式

通过`multiple`可设置多选选择器。

{{ multiple }}

## 分组选择器

通过设置`options`数据每一项中的`group`字段来定义分组选择器，当前组的子项利用`children`来设置。

{{ group }}

## 限制选择个数

多选模式下，可通过`max`属性设置最多可选择多少个，当到达设置的个数之后将禁用剩余待选项。

{{ max }}

## 折叠已选项

为避免多选项过多，导致页面布局错乱，可通过`minCollapsedNum`来设置超出个数之后会自动折叠。

{{ collapse }}

## 自定义空提示

当备选项为空的时候，可通过`empty`来设置空提示信息。

{{ empty }}

## 是否可搜索

通过`filterable`设置可在下拉选择器备选中进行快捷搜索。

{{ filter }}

## 自定义下拉面板

通过`panelBottomContent`可用来定义下拉面板底部的内容，通过`panelTopContent`可用来定义下拉面板顶部的内容。

{{ customPanel }}

## 不同状态

通过`loading`设置其加载中状态，通过`disabled`设置禁用状态，通过`readonly`设置只读模式，当设置加载状态的时候，还可以通
过`loadingText`来定义加载中的提示文字，支持属性以及插槽方式。

{{ disabled }}

## 虚拟滚动

当备选项比较多的时候，可通过设置`scroll="{type: 'virtual'}"`来开启虚拟滚动。

{{ virtual }}
