Select 选择器

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

基础用法

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

vue
<template>
  <div class="container">
    <ap-select v-model="selectLGVal" size="lg">
      <ap-option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.label }}
      </ap-option>
    </ap-select>
    <ap-select v-model="selectVal">
      <ap-option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.label }}
      </ap-option>
    </ap-select>
    <ap-select v-model="selectSMVal" size="sm">
      <ap-option v-for="item in options" :key="item.value" :value="item.value">
        {{ item.label }}
      </ap-option>
    </ap-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectVal = ref('')
const selectSMVal = ref('')
const selectLGVal = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style scoped>
.container {
  display: flex;
  gap: 20px;
}
</style>

全部禁用

将 select 设置 disabled 属性，则组件不可用

vue
<template>
  <div class="container">
    <ap-select v-model="selectVal" disabled>
      <ap-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        >{{ item.label }}</ap-option
      >
    </ap-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectVal = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style>
.container {
  display: flex;
}
</style>

部分选项禁用

将 option 设置 disabled 属性，则该选项不可用

vue
<template>
  <div class="container">
    <ap-select v-model="selectVal">
      <ap-option
        v-for="item in options"
        :disabled="item.disabled"
        :key="item.value"
        :value="item.value"
        >{{ item.label }}</ap-option
      >
    </ap-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectVal = 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>

<style>
.container {
  display: flex;
}
</style>

可清空选项

包含清空按钮，可将选择器清空为初始状态将 select 设置 clearable 属性，则可将选择器清空。

vue
<template>
  <div class="container">
    <ap-select v-model="selectVal" clearable>
      <ap-option
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        >{{ item.label }}</ap-option
      >
    </ap-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectVal = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style scoped>
.container {
  display: flex;
}
</style>

自定义选项

自定义每个选项如何被渲染

将自定义的 HTML 模板插入 option 的 slot 中

vue

筛选选项

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

为 Select 添加 filterable 属性即可启用筛选功能。默认情况下，Select 会找出所有 label 属性包含输入值的选项。

自定义搜索

如果希望使用其他的搜索逻辑，可以通过传入一个 query-change 来实现。 query-change 为一个 Function，它会在输入值发生变化时调用，参数为当前输入值。

远程查询

如果需要远程查询，可以通过在 query-change 中请求远程数据

自定义搜索插槽

可以通过 loading 、 no-result 、 empty 三个插槽来自定义三种情况的显示

vue
<template>
  <div class="container">
    <div>
      当前输入的筛选内容是：
      <span>{{ showData }}</span>
    </div>
    <div>
      当前选择的是：
      <span>{{ selectVal }}</span>
    </div>
    <ap-select v-model="selectVal" filterable @query-change="handleChange">
      <ap-option v-for="item in states" :value="item" :key="item">{{
        item
      }}</ap-option>
      <template #no-result> 没有搜索结果</template>
      <template #loading>正在加载</template>
    </ap-select>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectVal = ref('')
const showData = 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 handleChange = val => {
  showData.value = val
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

Select Props

prop	说明	类型	默认值
modelValue	控制选择值	String, Number, Boolean	无
valueKey	选择对象时区分不同的关键 key 值	String	value
placeholder	提示值	String	请选择…
filterable	是否启用查询（前端输入查询功能）	Boolean	false
clearable	是否启用清除按钮	Boolean	false
emptyText	选项为空时展现的文本	String	''
disabled	是否启用禁用开关	Boolean	false
maxHeight	下拉展示框最大高度	Number, String	235
isLoading	是否开启加载状态	Boolean	false
placement	下拉框的位置	String	'bottom'
size	组件大小	'sm', 'md', 'lg'	'md'

Select 插槽

插槽名	说明	子标签
default	Option 组件列表	Option
loading	加载中	-
no-result	查询没有结果	-
empty	远程搜索为空	-

Option Props

prop	说明	类型	默认值
value	控制选择值	String, Number, Boolean	无
disabled	是否启用禁用开关	Boolean	false

Select 事件

change: 选择改变时触发第一个参数为选择值 value 第二个参数为 label

input: 选择改变时触发第一个参数为选择值 value 第二个参数为 label

native-change: 只有内部 Option 选择之后才会触发'native-change'事件第一个参数为选择值 value 第二个参数为 label

query-change: 配合远程查询使用使用方法如上

Select 选择器 ​

基础用法 ​

全部禁用 ​

部分选项禁用 ​

可清空选项 ​

自定义选项 ​

筛选选项 ​

Select Props ​

Select 插槽 ​

Option Props ​

Select 事件 ​