选择器

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

基础用法

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

Option1

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const value = ref('Option1')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
</script>
<template>
  <Select v-model="value" placeholder="基础选择器，请选择" :options="options" />
  <div>{{ value }}</div>
</template>

可清空单选

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

设置clearable属性，则可将选择器清空。

Option1

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const value = ref('Option1')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
</script>
<template>
  <Select v-model="value" placeholder="可清空选择器，请选择" clearable :options="options" />
  <div>{{ value }}</div>
</template>

自定义模板

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

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

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
const customRender = (option) => {
  return h(
    'div',
    { style: { display: 'flex', 'justify-content': 'space-between', width: '100%' } },
    [h('b', null, option.label), h('span', null, option.value)]
  )
}
</script>
<template>
  <Select v-model="value" :options="options" :renderLabel="customRender" />
</template>

<style scoped></style>

筛选选项​

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

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

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
</script>
<template>
  <Select v-model="value" placeholder="可筛选选择器，请选择" filterable :options="options" />
</template>

远程搜索

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

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

<template>
  <Select
    v-model="value"
    filterable
    remote
    placeholder="Please enter a keyword"
    :remote-method="remoteMethod"
    :loading="loading"
    style="width: 240px"
  >
  </Select>
</template>

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

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const value = ref<string[]>('')
const loading = ref(false)

onMounted(() => {
  list.value = states.map((item) => {
    return { value: `value:${item}`, label: `label:${item}` }
  })
})

const remoteMethod = (query: string) => {
  return new Promise((resolve) => {
    if (query) {
      loading.value = true
      return setTimeout(() => {
        loading.value = false
        const options = list.value.filter((item) => {
          return item.label.toLowerCase().includes(query.toLowerCase())
        })
        resolve(options)
      }, 500)
    } else {
      resolve([])
    }
  })
}

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'
]
</script>