layui/package/document-component/src/document/zh-CN/components/select.md

::: anchor :::

::: title 基本介绍 :::

::: describe 用于代替原生的选择器，或者需要一个更优雅的多选器时。支持关键词查询 :::

::: title 基础使用 :::

::: demo 使用 lay-select 标签, 创建下拉选择框

:::

::: title 进阶使用 :::

::: demo 根据 v-model 的特性, 通过修改值更改 select 的下拉选项。

change ：{{value2}}

:::

::: title 禁止选择 :::

::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。

:::

::: title 开启检索 :::

::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部, 同时你可以使用 search-method 属性自定义搜索逻辑。

:::

::: title 传入选项 :::

::: demo 传入 options 数据，如果设置则不需要手动构造 selectOption 节点

:::

::: title 允许清空 :::

::: demo 通过 show-search 属性开启内容检索, input 变为可输入状态。在 multiple 模式下, 检索框位于 dropdown 顶部。

:::

::: title 海量数据 :::

::: demo

:::

::: title 多选使用 :::

::: demo <lay-button @click="mvalue=['1','5','7']">点击切换(当前值:{{mvalue.join()}})

<lay-select v-model="mvalue" @change="change" multiple>

:::

::: title 定制选项 :::

::: demo 使用 lay-select 标签, 创建下拉选择框

运动

:::

::: title Select 属性 :::

::: table

属性	描述	类型	可选值	默认值
v-model	选中值	string/number/Array	-	-
name	原生 name 属性	string	-	-
placeholder	默认空提示语	string	-	请选择
disabled	是否禁用	boolean	true false	false
multiple	是否为多选	boolean	true false	false
size	尺寸	string	lg md sm xs	md
showSearch	开启搜索	boolean	--	--
searchMethod	自定义搜索逻辑 (text, optionProps)	Function	--	--
searchPlaceholder	搜索提示	string	--	--
minCollapsedNum	多选模式最小折叠数量	number	--	--
collapseTagsTooltip	多选折叠后时候悬浮展示	boolean	--	--
contentStyle	内容自定义样式	StyleValue	--	--
contentClass	内容自定义Class	string Array<string | object> object	--	--

:::

::: title Select 事件 :::

::: table

属性	描述	接收值
change	切换事件	value
search	关键词变化事件	用户输入的关键词 string

:::

::: title Select Option 属性 :::

::: table

::: table

属性	描述	类型	可选值	默认值
label	标签值(必填)	string	-	-
value	值	string / number	-	-
keyword	用于匹配关键词的数据，传入文本+拼音可以支持拼音搜索	string	-	-
disabled	是否禁用	boolean	true false	false

:::

::: title Select Option 插槽 :::

::: table

属性	描述	接收值
default	默认(label)	-

:::

::: contributor select :::

::: previousNext select :::