N-UI

Appearance

Select 选择器 ​

当选项过多时，使用下拉菜单展示并选择内容。

基础用法 ​

适用广泛的基础单选，通过 options 属性传入选项数据。

vue
<template>
  <div style="width: 240px;">
    <NSelect v-model="value" :options="options" placeholder="请选择" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
]
</script>

有禁用选项 ​

在选项中设置 disabled 为 true 即可禁用该选项。

vue
<template>
  <div style="width: 240px;">
    <NSelect v-model="value" :options="options" placeholder="请选择" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2', disabled: true },
  { label: '选项三', value: '3' },
]
</script>

禁用状态 ​

设置 disabled 属性来禁用整个选择器。

vue
<template>
  <div style="width: 240px;">
    <NSelect v-model="value" :options="options" disabled placeholder="请选择" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
]
</script>

可清空 ​

设置 clearable 属性来显示清空按钮。

vue
<template>
  <div style="width: 240px;">
    <NSelect v-model="value" :options="options" clearable placeholder="请选择" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
]
</script>

多选 ​

设置 multiple 属性来启用多选。

vue
<template>
  <div style="width: 240px;">
    <NSelect v-model="value" :options="options" multiple placeholder="请选择" />
  </div>
</template>

<script setup>
import { ref } from 'vue')
const value = ref([])
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
]
</script>

折叠多选标签 ​

设置 collapse-tags 属性来折叠多选标签。

vue
<template>
  <div style="width: 240px;">
    <NSelect
      v-model="value"
      :options="options"
      multiple
      collapseTags
      placeholder="请选择"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref([])
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
]
</script>

可搜索 ​

设置 filterable 属性来启用搜索功能。

vue
<template>
  <div style="width: 240px;">
    <NSelect v-model="value" :options="options" filterable placeholder="请选择" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
]
</script>

远程搜索 ​

设置 remote 和 filterable 属性来启用远程搜索。

vue
<template>
  <div style="width: 240px;">
    <NSelect
      v-model="value"
      :options="options"
      filterable
      remote
      :loading="loading"
      placeholder="请输入搜索"
      @remote-search="handleSearch"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
const loading = ref(false)
const options = ref([])

const handleSearch = (query) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      options.value = [
        { label: query + ' - 结果1', value: query + '1' },
        { label: query + ' - 结果2', value: query + '2' },
      ]
    }, 500)
  }
}
</script>

尺寸 ​

使用 size 属性来设置选择器大小。

vue
<template>
  <div style="width: 240px;">
    <NSelect v-model="value1" :options="options" size="large" placeholder="大型选择器" />
    <div style="margin-top: 12px;">
      <NSelect v-model="value2" :options="options" placeholder="默认选择器" />
    </div>
    <div style="margin-top: 12px;">
      <NSelect v-model="value3" :options="options" size="small" placeholder="小型选择器" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
]
</script>

API ​

Props ​

属性说明类型默认值
modelValue绑定值any—
options选项数据SelectOption[][]
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
size尺寸'large' | 'default' | 'small''default'
clearable是否可以清空选项booleanfalse
collapseTags多选时是否将选中值按文字的形式展示booleanfalse
filterable是否可搜索booleanfalse
remote是否为远程搜索booleanfalse
loading是否正在加载远程数据booleanfalse
placeholder占位符string'请选择'

SelectOption ​

属性说明类型默认值
label选项的标签string—
value选项的值any—
disabled是否禁用booleanfalse
children子选项SelectOption[]—

Events ​

事件名说明类型
update:modelValue绑定值变化时触发(value: any) => void
change选中值发生变化时触发(value: any) => void
remote-search远程搜索时触发(query: string) => void
focus获取焦点时触发(event: FocusEvent) => void
blur失去焦点时触发(event: FocusEvent) => void
clear清空时触发() => void

Slots ​

插槽名说明
header下拉框顶部内容
footer下拉框底部内容
empty无选项时的列表

方法 ​

方法名说明类型
focus使选择器获取焦点() => void
blur使选择器失去焦点() => void
clear清空选中的值() => void