Select 选择器

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

v-model（modelValue）支持 string | number | object。

基础用法

适用广泛的基础单选 v-model 的值为当前被选中的 option 的 value 属性值。

基础选择器

Select 基础选择器

<script setup lang="ts">
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const test = ref('1')
const options2 = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>
<template>
  <Select v-model="test" placeholder="基础选择器，请选择" :options="options2" />
  <span>{{test}}</span>
</template>

可清空

设置 clearable 后，鼠标移入且当前有选中项时，会显示清空图标。

可清空选择器

Select clearable 用法

<script setup lang="ts">
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'

const test = ref('')
const options = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>
<template>
  <Select v-model="test" clearable placeholder="可清空选择器，请选择" :options="options" />
  <span>{{ test }}</span>
</template>

多选

设置 multiple 后，v-model 的值变为数组，可选择多个选项。

[]

多选选择器

Select multiple 用法

<script setup lang="ts">
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'

const test = ref<Array<string | number | object>>([])
const options = [
  { label: 'hello', value: '1' },
  { label: 'xyz', value: '2' },
  { label: 'testing', value: '3' },
  { label: 'check', value: '4', disabled: true }
]
</script>

<template>
  <Select
    v-model="test"
    multiple
    clearable
    filterable
    placeholder="多选选择器，请选择"
    :options="options"
  />
  <span>{{ test }}</span>
</template>

自定义模板

你可以自定义如何来渲染每一个选项,使用renderLabel属性,它接受一个回调函数,返回 vNode 类型。

自定义模板

Select

<script setup lang="ts">
  import { ref, h } from 'vue'
  import Select from '@/components/Select/Select.vue'
import type { SelectOption } from '@/components/Select/types'
  const test = ref('')
  const options2 = [
    { label: 'hello', value: '1' },
    { label: 'xyz', value: '2' },
    { label: 'testing', value: '3' },
    { label: 'check', value: '4', disabled: true }
  ]
  const customRender=(option:SelectOption)=>{
    return h('div',{class:'xyz'},[h('b', option.label), h('span', {}, [String(option.value)])])
  }
</script>
<template>
  <Select v-model="test" placeholder="基础选择器,请选择" :options="options2" :render-label="customRender"/>
</template>
<style>
  .pr-select_menu-item, .xyz{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
</style>

可筛选选项

设置 filterable 后，输入框会变为可输入状态，组件会根据输入内容筛选选项。

默认筛选：按 label.includes(关键词) 进行过滤。
自定义筛选：可通过 filterMethod 传入函数，函数参数是当前输入值，返回筛选后的选项数组。

可筛选选项

Select filterable 与 filterMethod 用法

<script setup lang="ts">
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
import type { SelectOption } from '@/components/Select/types'

const test = ref('')
const options: SelectOption[] = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
  { label: 'Watermelon', value: 'watermelon' },
  { label: 'Peach', value: 'peach' },
  { label: 'Pear', value: 'pear', disabled: true }
]

const filterMethod = (value: string): SelectOption[] => {
  const keyword = value.trim().toLowerCase()
  if (!keyword) return options
  return options.filter((item) => {
    return item.label.toLowerCase().includes(keyword) || String(item.value).includes(keyword)
  })
}
</script>

<template>
  <Select
    v-model="test"
    filterable
    placeholder="可筛选选择器，请输入关键字"
    :options="options"
    :filter-method="filterMethod"
  />
  <span>{{ test }}</span>
</template>

远程搜索

输入关键字以从远程服务器中查找数据。

服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将 filterable 和 remote 设置为true，同时传入一个remote-method。 remote-method 为一个返回 Promise 的Function，类型为 (value: string) => Promise<SelectOption[]> 。

筛选选项

Select 筛选选项

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
// import type { CustomFilterRemoteFunc } from '@/components/Select/types'
const test = ref('')
// const states = [
//   'Alabama',
//   'Alaska',
//   'Arizona',
//   'Arkansas',
//   'California',
//   'Colorado',
//   'Connecticut',
//   'Delaware',
//   'Florida',
//   'Georgia',
//   'Hawaii',
//   'Idaho',
//   'Illinois',
//   'Indiana',
//   'Iowa',
//   'Kansas',
//   'Kentucky',
//   'Louisiana',
//   'Maine',
//   'Maryland',
//   'Massachusetts',
//   'Michigan',
//   'Minnesota',
//   'Mississippi',
//   'Missouri',
//   'Montana',
//   'Nebraska',
//   'Nevada',
//   'New Hampshire',
//   'New Jersey',
//   'New Mexico',
//   'New York',
//   'North Carolina',
//   'North Dakota',
//   'Ohio',
//   'Oklahoma',
//   'Oregon',
//   'Pennsylvania',
//   'Rhode Island',
//   'South Carolina',
//   'South Dakota',
//   'Tennessee',
//   'Texas',
//   'Utah',
//   'Vermont',
//   'Virginia',
//   'Washington',
//   'West Virginia',
//   'Wisconsin',
//   'Wyoming'
// ]

// const remoteFilter:CustomFilterRemoteFunc = (query:string) => {
//   return new Promise((resolve) => {
//     if (query) {
//       setTimeout(() => {
//         const options = states
//           .filter((item) => {
//             return item.toLowerCase().includes(query.toLowerCase())
//           })
//           .map((label) => {
//             return { label, value: label }
//           })
//         resolve(options)
//       }, 500)
//     } else {
//       resolve([])
//     }
//   })
// }
const handleFetch = (query) => {
  if (!query) return Promise.resolve([])
  return fetch(`https://api.github.com/search/repositories?q=${query}`)
    .then((res) => res.json())
    .then(({ items }) => {
      return items.slice(0, 10).map((item) => ({ label: item.name, value: item.node_id }))
    })
}
</script>
<template>
  <Select
    v-model="test"
    placeholder="搜索远程结果"
    filterable
    remote
    :remote-method="handleFetch"
  />
</template>

API

Select Attributes

参数	说明	类型	默认值
modelValue	绑定值，单选为值，多选为数组	`SelectValue \| SelectValue[]`	-
options	选项列表	`SelectOption[]`	[]
placeholder	占位文案	`string`	请选择
disabled	是否禁用	`boolean`	false
clearable	是否可清空	`boolean`	false
multiple	是否多选	`boolean`	false
renderLabel	自定义选项渲染	`(option: SelectOption) => VNode`	-
filterable	是否可筛选	`boolean`	false
filterMethod	自定义本地筛选方法	`(value: string) => SelectOption[]`	-
remote	是否启用远程搜索	`boolean`	false
remoteMethod	自定义远程搜索方法	`(value: string) => Promise<SelectOption[]>`	-

SelectOption 结构：

参数	说明	类型	默认值
label	显示文本	`string`	-
value	选项值	`string \| number \| object`	-
disabled	是否禁用	`boolean`	false

Select Events

事件名	说明	回调参数
update:modelValue	绑定值变更时触发	`(value: SelectValue \| SelectValue[]) => void`
change	选中项变更时触发	`(value: SelectValue \| SelectValue[]) => void`
visible-change	下拉面板显隐变化时触发	`(visible: boolean) => void`
clear	点击清空时触发	`() => void`

Select 选择器 ​

基础用法 ​

可清空 ​

多选 ​

自定义模板 ​

可筛选选项 ​

远程搜索 ​

API ​

Select Attributes ​

Select Events ​

Select 选择器

基础用法

可清空

多选

自定义模板

可筛选选项

远程搜索

API

Select Attributes

Select Events