Select选择框

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

基础用法

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

基础用法

Button 组件的基础用法

<template lang="">
  <div>
    <el-select v-model="test" placeholder="请选择" :options="options"></el-select>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ElSelect from '@/components/Select/Select.vue'
const options = [
  { label: '麻辣烫', value: '1'},
  { label: '小龙虾', value: '2'},
  { label: '汤圆', value: '3'},
  { label: '饺子', value: '4'}
]

const test = ref('1')
</script>

有禁用选项

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

基础用法

Select 组件的基础用法

<template lang="">
  <div>
    <el-select v-model="test" placeholder="请选择" :options="options"></el-select>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ElSelect from '@/components/Select/Select.vue'
const options = [
  { label: '麻辣烫', value: '1'},
  { label: '小龙虾', value: '2'},
  { label: '汤圆', value: '3'},
  { label: '饺子', value: '4', disabled: true}
]

const test = ref('1')
</script>

禁用状态

禁用整个选择器组件

为 el-select 设置 disabled属性，则整个选择器不可用。

基础用法

Select 组件的基础用法

<template lang="">
  <div>
    <el-select v-model="test" placeholder="请选择" :options="options"></el-select>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ElSelect from '@/components/Select/Select.vue'
const options = [
  { label: '麻辣烫', value: '1'},
  { label: '小龙虾', value: '2'},
  { label: '汤圆', value: '3'},
  { label: '饺子', value: '4', disabled: true}
]

const test = ref('1')
</script>

可筛选

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

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

基础用法

Select 组件的基础用法

<template lang="">
  <div>
    <el-select v-model="test" placeholder="请选择" :options="options" filterable></el-select>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ElSelect from '@/components/Select/Select.vue'
const options = [
  { label: '麻辣烫', value: '1'},
  { label: '小龙虾', value: '2'},
  { label: '汤圆', value: '3'},
  { label: '饺子', value: '4'}
]

const test = ref('1')
</script>

可清空单选

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

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

基础用法

Select 组件的基础用法

<template lang="">
  <div>
    <el-select v-model="test" placeholder="请选择" :options="options" clearable></el-select>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ElSelect from '@/components/Select/Select.vue'
const options = [
  { label: '麻辣烫', value: '1'},
  { label: '小龙虾', value: '2'},
  { label: '汤圆', value: '3'},
  { label: '饺子', value: '4'}
]

const test = ref('1')
</script>