Select 选择框

基础用法

查看代码

<template>
  <e-select v-model="value" style="width: 250px" :options />
</template>

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

const value = ref('')

const options = [
  { label: '选项一', value: 'value1' },
  { label: '选项二', value: 'value2' },
  { label: '选项三', value: 'value3' }
]
</script>

多选

查看代码

<template>
  <e-select v-model="value" style="width: 250px" multiple :options />
</template>

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

const value = ref('')

const options = [
  { label: '选项一', value: 'value1' },
  { label: '选项二', value: 'value2' },
  { label: '选项三', value: 'value3' }
]
</script>

一键清除

查看代码

<template>
  <e-select v-model="value" style="width: 250px" :options clearable />
  <br />
  <e-select v-model="value2" multiple style="width: 250px" :options clearable />
</template>

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

const value = ref('')
const value2 = ref('')

const options = [
  { label: '选项一', value: 'value1' },
  { label: '选项二', value: 'value2' },
  { label: '选项三', value: 'value3' }
]
</script>

禁用

查看代码

<template>
  <e-select v-model="value" style="width: 250px" :options disabled />
</template>

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

const value = ref('')

const options = [
  { label: '选项一', value: 'value1' },
  { label: '选项二', value: 'value2' },
  { label: '选项三', value: 'value3' }
]
</script>

筛选

查看代码

<template>
  <e-select v-model="value" style="width: 250px" :options filterable />
  <br />
  <e-select v-model="value2" multiple style="width: 250px" :options filterable />
</template>

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

const value = ref('')
const value2 = ref('')

const options = [
  { label: '选项一', value: 'value1' },
  { label: '选项二', value: 'value2' },
  { label: '选项三', value: 'value3' }
]
</script>

Select API

defineProps

属性名	说明	类型	默认值
v-model	值	string | string[]	--
placeholder	占位文本	string	'请选择'
disabled	禁用	boolean	false
clearable	一键清除	boolean	false
options	选项配置	option[]	[]
labelKey	标签key	string	'label'
valueKey	值key	string	'value'
filterable	支持筛选	boolean	false