Select 下拉框

快速的数据化配置一个下拉框，常用于搭配数据表单。

基础使用

点击查看代码

<template>
  <div class="demo">
    <p><b>普通样式</b></p>
    <AgelSelect v-model="value2" :options="['optionA', 'optionB', 'optionC']"></AgelSelect>
    <p><b>分组样式</b></p>
    <AgelSelect v-model="value" :options="options"></AgelSelect>
  </div>
</template>

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

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

const options = [
  {
    label: '选项A', value: 'A',
    options: [
      { label: '选项A-1', value: 'A1', },
      { label: '选项A-2', value: 'A2', },
    ]
  },
  {
    label: '选项B', value: 'B',
    options: [
      { label: '选项B-1', value: 'D1', },
      { label: '选项B-2', value: 'D2', disabled: true },
    ]
  }
]

</script>

属性

属性	类型	默认值	说明
options	OptionProps[] | string[]	-	option 配置
props	{label: string, value: string}	-	OptionProps 配置别名
......	-	-	ElSelect 属性

OptionProps

属性	类型	默认值	说明
label	string	-	标签
value	string | number | boolean | object	-	选中值
disabled	boolean	-	是否禁用
options	OptionProps[]	-	分组配置

方法

名称	参数	说明
focus, blur	-	ElSelect 方法

插槽

名称	插槽作用域	说明
default	{item,index}	自定义模板
prefix	-	组件头部内容
empty	-	无选项时的列表