---
id: "select"
title: "单选下拉与选项状态"
category: "选择组件"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-select"
source_data: "../component-data.json"
official_components: ["select", "option", "option-group"]
template_components: ["el-option", "el-option-group", "el-select"]
scenario_count: 10
verification: "scenario-checklist-not-full-test-pass"
---

# 单选下拉与选项状态

专题 `select` · 选择组件 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

官方条目映射：`select`、`option`、`option-group`。

本页模板直接使用的 Element UI 标签：`el-option`、`el-option-group`、`el-select`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：一个字段只允许一个值时使用普通单选下拉。未选显示“请选择”，默认值由业务传入；只有范围确实包含所有对象时才提供“全部”，不把它当通用默认值。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 选择数量（用途） | 单选只保留一个值。 | 本页用于单选；允许多个值并存时参考多选专题，不把单选/多选当配色差异。 |
| 搜索、清除、分组（功能配置） | 搜索帮助找候选，清除回到未选，分组组织已有候选。 | 本页左侧演示搜索和清除，右侧演示分组。按候选规模及是否允许空值决定，不要求每个下拉都同时配置。 |
| 关联字段（业务组合） | 下拉结果决定后续应填写的内容。 | 本页下方按链接、页面或不跳转显示不同目标内容；仅当前分支参与校验和结果，不增加另一套下拉样式。 |
| 选中、定位与错误（自动状态） | 当前值、键盘定位、禁用项和校验错误含义不同。 | 选择后保留已选标记；方向键只移动候选焦点；受限项禁用，真实校验失败才显示红边。 |

使用边界：不要默认给所有业务增加“全部”，也不要把库的远程搜索、创建新项等能力直接列为本后台已采用。

## 组件规则

- **SELECT-R01**：闭合态显示当前选择；未选择占位统一“请选择”，默认范围为全部时显示“全部”。无选择与全部是不同语义，默认值由宿主传入；字段标签须独立可见。展开层提供当前选中、悬停、禁用。
- **SELECT-R02**：触发框宽度统一参考输入框专题，填满字段所在内容列；普通筛选整项280px包含标签和8px间距。长已选名称不撑宽触发框，候选面板容纳选项且不得超出视口；不因清除图标或箭头显隐改变外宽。
- **SELECT-R03**：沿用 Element Select 键盘模式，方向键移动候选、回车键 确认、退出键 关闭；补充宿主焦点回返与读屏验证。禁用项不可选。
- **SELECT-R04**：空选项 / 搜索无结果 / 加载失败分别提示；选中项文本过长时折行或补全文，不撑破弹层。
- **SELECT-R05**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **SELECT-R06**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **SELECT-R07**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **SELECT-R08**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。
- **SELECT-R09**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。
- **SELECT-R10**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。
- **SELECT-R11**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。
- **SELECT-R12**：指定链接显示链接输入，指定页面显示对象选择，不跳转不要求目标；当前目标错误时红边与红提示同步。链接协议、可信域及对象权限以实际业务合同校验。
- **SELECT-R13**：【触发框】白底、正文深灰、边框灰；占位禁用灰；聚焦仅原边框主题蓝，不叠加外圈。
- **SELECT-R14**：【候选项与选中项】普通项正文深灰；悬停或键盘定位用浅灰背景；已选项用选中浅蓝底、操作蓝文字和已选语义。
- **SELECT-R15**：【禁用】整个控件禁用时使用浅灰背景、禁用灰和边框灰；单项禁用只影响该项，保留已选值但不能重新触发。
- **SELECT-R16**：【错误与无结果】真实表单校验失败时触发框与短提示同步错误红；没有候选项时显示空值灰提示，不伪造加载失败。
- **SELECT-R17**：【远程加载】仅远程候选项请求时显示主题蓝加载图标；失败显示错误红短提示及操作蓝重试，已有选值保持可读。
- **SELECT-R18**：【组件边界】单选下拉没有半选横线和复选方框；已选值、菜单高亮和输入焦点是三个不同状态。
- **SELECT-R19**：远程检索与允许创建条目是额外数据能力，不等于本地filterable搜索。本页已有本地筛选；真实远程需接入加载、失败与重试，创建新值必须获得业务允许并校验唯一性后采用，当前未实现这两项业务能力。
- **SELECT-R20**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。
- **SELECT-R21**：指定链接使用可解析的HTTPS主机地址；只有问号/井号、缺主机、空白等格式不算有效。校验只作用于当前分支，不能把格式通过称为目标可访问。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **SELECT-S01**：当前示例核对单选、本地搜索、清除、禁用选项及分组选择；下方核对选择结果与目标字段联动。远程搜索和创建新选项未在本页演示，不计为本后台已采用功能。
- [ ] **SELECT-S02**：单选清除表示回到未选值；折叠已选标签属于多选配置，转到“多选、搜索与折叠展示”核对，不作为本页的另一款单选样式。
- [ ] **SELECT-S03**：当前核对默认具体值、全部、清除与本地搜索无匹配；无选项、加载中、远程失败和响应竞态按宿主实际接入能力另验，不计为本地搜索已具备。
- [ ] **SELECT-S04**：本页核对触发框焦点、选项悬停、已选项和禁用项，以及下方目标字段的校验错误。已选与悬停叠加按选项规范处理，错误规则只作用于真实校验失败的字段。
- [ ] **SELECT-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。
- [ ] **SELECT-S06**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。
- [ ] **SELECT-S07**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。
- [ ] **SELECT-S08**：链接/页面/不跳转三分支；空值及非法链接失败；切换移除旧错误；其他分支草稿不参与当前结果。
- [ ] **SELECT-S09**：宿主联合表单接入后验收：输入、下拉、文本域和数字各自校验；修正一项只清除对应错误，错误状态再次聚焦仍无外圈。当前专题基础示例不等于完整业务表单。
- [ ] **SELECT-S10**：宽度联动验收：按输入框专题核对整项与边框口径、同组对齐、长内容、窄容器换行及状态不跳宽。

### 专题验收重点

方向键、禁用项与选择持久显示；“全部”不能强加给业务。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<div class="audit-select-examples">
<div class="audit-select-field">
<label for="select-range-value">选择范围</label>
<el-select v-model="singleValue" placeholder="请选择" clearable filterable id="select-range-value" aria-label="选择范围">
<el-option label="全部" value="all">
</el-option>
<el-option label="选项 A" value="a">
</el-option>
<el-option label="选项 B" value="b">
</el-option>
<el-option label="选项 C（禁用）" value="c" disabled>
</el-option>
</el-select>
</div>
<div class="audit-select-field">
<label for="select-group-value">分组选择</label>
<el-select v-model="groupSelect" placeholder="请选择" id="select-group-value" aria-label="分组选择">
<el-option-group label="分组一">
<el-option label="选项一" value="1">
</el-option>
</el-option-group>
<el-option-group label="分组二">
<el-option label="选项二" value="2">
</el-option>
</el-option-group>
</el-select>
</div>
</div>
<!-- reference-pattern-destination-pattern -->
<section class="reference-supplement">
<h4>选择方式决定下一项内容</h4>
<destination-pattern>
</destination-pattern>
<p class="reference-note">参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。<a href="https://ztqpvr.axshare.com/#id=8ff79v&amp;p=系统公告&amp;g=1" target="_blank" rel="noopener noreferrer">查看参考页</a>
</p>
</section>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：历史样板规范 36；本次键盘与异常态补充；2026-09-15 参考抽样：https://ztqpvr.axshare.com/#id=8ff79v&p=系统公告&g=1。
- [打开本专题页面](../index.html#spec-select)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`select`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

自定义示例 `destination-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。

组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 触发框 | 白底、正文深灰、边框灰；占位禁用灰；聚焦仅原边框主题蓝，不叠加外圈。 |
| 候选项与选中项 | 普通项正文深灰；悬停或键盘定位用浅灰背景；已选项用选中浅蓝底、操作蓝文字和已选语义。 |
| 禁用 | 整个控件禁用时使用浅灰背景、禁用灰和边框灰；单项禁用只影响该项，保留已选值但不能重新触发。 |
| 错误与无结果 | 真实表单校验失败时触发框与短提示同步错误红；没有候选项时显示空值灰提示，不伪造加载失败。 |
| 远程加载 | 仅远程候选项请求时显示主题蓝加载图标；失败显示错误红短提示及操作蓝重试，已有选值保持可读。 |

单选下拉没有半选横线和复选方框；已选值、菜单高亮和输入焦点是三个不同状态。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [会员列表 · 筛选区状态、会员等级等下拉](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md)
- [会员详情 · 详情编辑中枚举字段下拉](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md)
- [新增账号 · 新增表单 · 商户、性别、代理配置下拉](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md)
- [存款记录 · 筛选区渠道、状态等下拉](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md)
- [账户调整审核 · 筛选调整类型、方式等下拉](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md)
- [活动管理 · 活动类型、状态等下拉](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md)
- [广告管理 · 设备、状态及投放位置下拉](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md)
- [公告管理 · 公告设备、状态等下拉](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md)
- [通知管理 · 通知类型、设备、发送范围下拉](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md)
- [操作日志 · 日志类型、结果等下拉](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md)
- [运营总览 · 指标、口径等选项](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md)
- [客服工单管理 · 工单类型、支付方式等下拉](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)