Select

CuiSelect 选择框组件

CuiSelect

CuiSelect 是对 Element Plus ElSelect 的标准封装，统一了选项数据格式，简化了常见的单选、搜索场景。

基础选择

演示 CuiSelect 的基础用法，包含清空与过滤功能

Live Demo

Preview

Code

先看效果，再决定是否展开代码细节。

<script setup lang="ts">
import { ref } from 'vue'
import { CuiSelect } from '@eams-monorepo/vue-element-cui'
import type { CuiSelectOption } from '@eams-monorepo/vue-element-cui'

const selected = ref<string | null>(null)
const options: CuiSelectOption[] = [
  { label: '固定资产', value: 'fixed' },
  { label: '流动资产', value: 'current' },
  { label: '无形资产', value: 'intangible' },
]
</script>

<template>
  <CuiSelect v-model="selected" :options="options" placeholder="请选择资产类型" />
</template>

统一选项格式

通过 options 数组传入 { label, value, disabled? } 结构，不需要手动写 el-option。

远程搜索支持

传入 remote 与 remoteMethod 即可开启远程搜索，加载状态由 loading 控制。

默认可清空可过滤

clearable 与 filterable 默认为 true，减少重复配置。

Selectors Overview
select / enum / dict / autocomplete 等选择类组件
SelectEnum
CuiSelectEnum 枚举选择框