SelectBox

CuiSelectBox 弹层选择框

CuiSelectBox

CuiSelectBox 是弹层式选择框，通过 selector 插槽挂载自定义选择内容（如人员列表、树形选择器等），适用于候选项复杂、需要确认操作的场景。

弹层选择框基础用法

通过 selector 插槽实现自定义弹层内容，点击确认后写回值

Live Demo

Preview

Code

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

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

const selected = ref<string | null>(null)
</script>

<template>
  <CuiSelectBox v-model="selected" type="user" placeholder="请选择负责人">
    <template #selector="{ condition, onSubmit }">
      <!-- 此处放置自定义选择器内容 -->
      <el-button type="primary" @click="onSubmit('user-001')">选择张三</el-button>
    </template>
  </CuiSelectBox>
</template>

弹层式选择

点击输入框触发弹层，弹层内容完全由 selector 插槽自定义，适合复杂候选项场景。

多选数量限制

通过 limit 控制最多可选数量，超出时禁止继续选择。

插槽自定义内容

selector 插槽提供 condition 与 onSubmit，便于将当前筛选条件传入列表并在确认时回传值。