Select 选择框

avue-select：单选为字典标量值，多选建议使用数组。树选择器应使用 avue-input-tree，不要把 Select 的 type 写成 tree。

通用属性、字典与事件见 基础组件使用约定。模板属性可写为 kebab-case，Form 配置对象使用 camelCase。

基础用法

效果预览可直接操作下方示例

独立组件通过 v-model 绑定单个字段；在 Form 中使用时，将相应配置放入 column。

正在加载示例…

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :md="12">
      <p>单选（数字值）</p>
      <avue-select v-model="single" :dic="options" placeholder="请选择状态" />
    </el-col>
    <el-col :xs="24" :md="12">
      <p>多选（数组值）</p>
      <avue-select v-model="multiple" :dic="options" multiple all :remove-tag="onRemoveTag" placeholder="请选择状态" />
    </el-col>
  </el-row>
  <pre>{{ JSON.stringify({ single, multiple, removedTag }, null, 2) }}</pre>
</template>

<script setup>
import { ref } from 'vue';
const single = ref(0);
const multiple = ref([0, 1]);
const removedTag = ref(null);
const options = [
  { label: '待处理', value: 0 },
  { label: '处理中', value: 1 },
  { label: '已归档（禁用）', value: 2, disabled: true },
];
function onRemoveTag(tagValue) {
  removedTag.value = tagValue;
}
</script>

属性

属性	类型	默认值	说明
dic / props	array / object	[] / 默认映射	本地选项与键映射
multiple / limit	boolean / number	false / 0	多选与最多选项数，0 不限
all	boolean	false	普通多选显示全选，跳过禁用项
filterable / allowCreate	boolean	false	搜索与创建；创建需配合搜索
virtualize	boolean	false	使用 Element Plus Select V2
remote	boolean	false	远程搜索，自动开启搜索
column	object	{}	远程请求的 dicUrl/dicQuery/dicMethod/dicHeaders/dicFormatter/props
defaultFirstOption	boolean	false	回车选择首个匹配项
tags / collapseTags / collapseTagsTooltip	boolean	false	折叠多选标签及提示
maxCollapseTags	number	继承 Element Plus	标签最大显示数量，类型是数字
noMatchText / noDataText / loadingText	string	—	无匹配、空字典和加载文案
valueOnClear	string / number / boolean / function	undefined	清空后的值
removeTag	function	—	接收被移除的 tagValue，不是对象
endReached	function	—	虚拟列表到底回调，接收 { value, column, dic }
drag	boolean	false	标签拖拽；先加载 Sortable

远程搜索

独立 Select 从 column 读取远程配置。Form 会把整列传给内部组件，无需再包一层 column。

<avue-select
  v-model="userId"
  remote
  :column="{ dicUrl: '/api/users', dicQuery: { keyword: '{{key}}' } }"
/>

{{key}} 此时是搜索词。失败会触发 dic-error({ type: 'select-remote', error })。组件的 end-reached 事件透传底层参数，与 endReached 回调对象不同。

默认插槽接收 { item, label, value }，label/value 是映射键名，item 是选项对象。