随缘吧

切换主题

Select 选择器 ​

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

基础用法 ​

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

<template>
    <Select @change="change" v-model="value" placeholder="基础选择器，请选择" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
import { createMessage } from '@/components/Message/method'

const options = ref(
    [
        { label: 'Vue', value: '1' },
        { label: 'React', value: '2' },
        { label: 'Next', value: '3' },
        { label: 'Nest', value: '4' }
    ]
)

const value = ref('')

const change = (value) => {
    const item = options.value.find(item => item.value === value)
    createMessage({ 
        message: `label: ${item.label}; value: ${item.value}`, 
        type: 'success', 
        duration: 2000 
    })
}
</script>

有禁用选项 ​

在 option 中，设定 disabled 值为 true，即可禁用该选项

<template>
    <Select @change="change" v-model="value" placeholder="有禁用选项，请选择" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
import { createMessage } from '@/components/Message/method'

const options = ref(
    [
        { label: 'Vue', value: '1' },
        { label: 'React', value: '2' },
        { label: 'Next', value: '3', disabled: true },
        { label: 'Nest', value: '4' }
    ]
)

const value = ref('')

const change = (value) => {
    const item = options.value.find(item => item.value === value)
    createMessage({ 
        message: `label: ${item.label}; value: ${item.value}`, 
        type: 'success', 
        duration: 2000 
    })
}
</script>

可清空单选 ​

您可以使用清除图标来清除选择。

设置 clearable 属性，则可将选择器清空。 需要注意的是，clearable 属性仅适用于单选

<template>
    <Select @change="change" v-model="value" clearable placeholder="可清空单选，请选择" :options="options" />
</template>
<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
import { createMessage } from '@/components/Message/method'

const options = ref(
    [
        { label: 'Vue', value: '1' },
        { label: 'React', value: '2' },
        { label: 'Next', value: '3' },
        { label: 'Nest', value: '4' }
    ]
)

const value = ref('1')

const change = (value) => {
    const item = options.value.find(item => item.value === value)
    createMessage({ 
        message: `label: ${item.label}; value: ${item.value}`, 
        type: 'success', 
        duration: 2000 
    })
}
</script>

自定义模板 ​

你可以自定义如何来渲染每一个选项。

使用 h 渲染函数

<template>
    <Select @change="change" :renderLabel="customRender"  v-model="value" placeholder="自定义模板，请选择" :options="options" />
</template>
<script setup>
import { ref, h } from 'vue'
import Select from '@/components/Select/Select.vue'
import { createMessage } from '@/components/Message/method'

const options = ref(
    [
        { label: 'Vue', value: '1' },
        { label: 'React', value: '2' },
        { label: 'Next', value: '3' },
        { label: 'Nest', value: '4' }
    ]
)

const value = ref('')

const customRender = (option) => {
  return h(
    'div', 
    { 
        className: 'select_item',
        style: {
            display: 'flex',
            justifyContent: 'space-between'
        }
    }, 
    [
      h('b', option.label),
      h('span', option.value)
    ]
  )
}

const change = (value) => {
    const item = options.value.find(item => item.value === value)
    createMessage({ 
        message: `label: ${item.label}; value: ${item.value}`, 
        type: 'success', 
        duration: 2000 
    })
}
</script>

筛选选项 ​

可以利用筛选功能快速查找选项。

添加 filterable 属性即可启用搜索功能。 默认情况下，Select 会找出所有 label 属性包含输入值的选项。 如果希望使用其他的搜索逻辑，可以通过传入一个 filter-method 来实现，它会在输入值发生变化时调用，参数为当前输入值。

<template>
    <Select class="select" filterable v-model="value1" placeholder="使用默认过滤方法，请选择" :options="options1" />
    <Select class="select" filterable :filterMethod="filterMethod" v-model="value2" placeholder="使用自定义过滤方法，请选择" :options="options2" />
</template>
<script setup>
import { ref, h } from 'vue'
import Select from '@/components/Select/Select.vue'
import { createMessage } from '@/components/Message/method'

const options1 = ref(
    [
        { label: 'Java', value: '1' },
        { label: 'JavaScript', value: '2' },
        { label: 'Next', value: '3' },
        { label: 'Nest', value: '4' }
    ]
)

const options2 = ref(
    [
        { label: 'Java', value: '1' },
        { label: 'JavaScript', value: '2' },
        { label: 'Next', value: '3' },
        { label: 'Nest', value: '4' }
    ]
)

const value1 = ref('')
const value2 = ref('')

const filterMethod = (value) => {
    const filterOption = options2.value.filter(item => item.label.toLocaleLowerCase().includes(value.toLocaleLowerCase()))
    return filterOption
}
</script>
<style scoped>
.select {
    margin: 12px;
}
span {
    margin-right: 12px;
}
</style>

远程搜索 ​

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

从服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将 filterable 和 remote 设置为 true，同时传入一个 remote-method，它会在输入值发生变化时调用，参数为当前输入值。

<template>
    <Select remote filterable :remote-method="remoteFilter" placeholder="远程搜索，请选择" />
</template>
<script setup>
import Select from '@/components/Select/Select.vue'

const remoteFilter = (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, 5).map(item => ({ label: item.name, value: item.nodeid }))
  })
}
</script>

参数 ​

属性名说明类型默认值
v-model激活选择中的 valuestring
options选项array
disabled是否禁止点击booleanfalse
clearable是否清空booleanfasle
filterable是否支持过滤，可以与 filterMethod 进行配合使用booleanfalse
remote是否支持远程搜索，配合 filterable 和 remoteMethodbooleanfalse

方法 ​

属性名说明返回的类型
filterMethod自定义筛选方法array
remoteMethod自定义远程搜索方法array
renderLabel自定义渲染内容vnode 或 label

事件 ​

属性名说明接收的参数
change当激活项发生变化value
update:modelValue双向数据绑定
clear清除激活项