layui/example/docs/zh-CN/components/select.md

::: anchor :::

::: title 基本介绍 :::

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

::: title 基础使用 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const value = ref(null); return { value } } } </script>

::: title 数据联动 :::

::: demo

切换-当前值 : {{value2}}

<script> import { ref } from 'vue' export default { setup() { const value2 = ref(null); var i = 1; function change1(){ value2.value=i++%3+1 } return { value2, change1 } } } </script>

:::

::: title 选择禁用 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const selected = ref('1') return { selected } } } </script>

:::

::: title 关键词变化事件，可作为远程搜索处理算法 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const selected = ref('1'); function search(txt){ console.log('关键词:',txt) } return { selected,search } } } </script>

:::

::: title 选择项自定义搜索内容，可以在keyword属性中传入拼音用于支持拼音搜索 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const selected = ref('1'); return { selected } } } </script>

:::

::: title 传入items属性进行选项渲染 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const selected = ref('1'); const items=ref([ {label:'选项1',value:1,keyword:'选项xuanxiang1'}, {label:'选项2',value:2,keyword:'选项xuanxiang2'}, {label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true}, ]) return { selected,items } } } </script>

:::

::: title 传入create属性和接收create事件用于开启创建子项功能 :::

::: demo

当前元素: {{items.map(o=>o.label).join()}} <script> import { ref } from 'vue' export default { setup() { const selected = ref('1'); const items=ref([ {label:'选项1',value:'1',keyword:'选项xuanxiang1'}, {label:'选项2',value:2,keyword:'选项xuanxiang2'}, {label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true}, ]); function createEvent(v){ items.value.push({ label:v, value:items.value.length }) } return { selected,items,createEvent } } } </script>

:::

::: title 海量数据 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const selected2 = ref('1') return { selected2 } } } </script>

:::

::: title 多选使用 :::

::: demo

点击切换(当前值:{{mvalue.join()}}) <script> import { ref,watch } from 'vue' export default { setup() { const mvalue = ref(['1','2']); const change = function(val){ console.log(val, mvalue.value) } return { mvalue, change } } } </script>

:::

::: title Select 属性 :::

::: table

属性	描述	类型	可选值	默认值
v-model	选中值	string/number/Array	-	-
name	原生 name 属性	string	-	-
placeholder	默认空提示语	string	-	请选择
disabled	是否禁用	boolean	true false	false
showEmpty	是否增加空提示选项	boolean	true false	true
multiple	是否为多选	boolean	true false	false
create	是否允许创建	boolean	true false	false

:::

::: title Select 事件 :::

::: table

属性	描述	接收值
change	切换事件	value
search	关键词变化事件	用户输入的关键词 string
create	允许创建情况下的创建回调事件	用户输入的关键词 string

:::

::: title Select Option 属性 :::

::: table

::: table

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

:::

::: title Select Option 插槽 :::

::: table

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

:::

::: previousNext select :::