From 23b23dc8e5975e129aaf545eda66a46276cfea6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Thu, 3 Sep 2026 17:03:08 +0800 Subject: [PATCH] =?UTF-8?q?style(element-ui):=20=E5=8C=BA=E5=88=86=20el-se?= =?UTF-8?q?lect=20=E9=80=89=E4=B8=AD=E5=80=BC=E4=B8=8E=E5=8D=A0=E4=BD=8D?= =?UTF-8?q?=E7=AC=A6=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修复 Element Plus el-select 组件选中值与占位符使用同一节点导致无法区分颜色的问题 - 只有未选值或已展开无搜索时节点带 .is-transparent，用此类排除选中颜色样式应用 - 更新 --- .workbuddy/memory/2026-09-03.md | 7 +++++++ src/styles/element-ui.scss | 15 +++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/.workbuddy/memory/2026-09-03.md b/.workbuddy/memory/2026-09-03.md index ad1bf9c..4edfd3b 100644 --- a/.workbuddy/memory/2026-09-03.md +++ b/.workbuddy/memory/2026-09-03.md @@ -15,3 +15,10 @@ - 根因：`__dispatch-shipping-form __route-address-row` 网格地址列为 `minmax(280px, 1fr)`，各列最小宽度合计 1030px，弹窗不够宽时 grid 不换行直接溢出。 - 修复：地址列改 `minmax(0, 1fr)`（宽屏仍 1fr 拉伸，窄窗自动收窄，总最小宽降到 750px）。 - 备注：基础规则 `__route-address-row`（13750 行，运单独立表单页等在用，7 列含 40px 按钮列）仍是 minmax(280px,1fr)，同样窄窗有溢出风险，暂未动（用户未反馈该页问题）。 + +## el-select 选中值 / 占位符颜色区分（全局） +- 需求：已选值 #606266，未选值保持 placeholder 灰 #909399。 +- 根因：Element Plus 的选中值文本与占位符**共用同一节点** `
`，仅靠 `.el-select__selected-item` 无法区分，导致未选态也被染成选中色。 +- 区分标志：只有「未选值」或「已展开但无搜索输入」时才带 `.is-transparent`。 +- 修复（`src/styles/element-ui.scss`）：选中规则改为 `.el-select__wrapper:not(.is-disabled) .el-select__selected-item:not(.is-transparent)`；多选 tag 文字另加 `.el-select__tags-text` 规则（tag 自身 color 优先级更高，父级规则盖不到）。 +- 经验：以后写任何「区分 el-select 有值/无值」的 CSS，一律用 `:not(.is-transparent)`。 diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index cba5269..e5439c6 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -1117,11 +1117,18 @@ color: #909399 !important; } -// 已选中：选中文本用主文字色 #333333，与占位符明显区分。 -// 注意：Element Plus 选中值节点同时带 el-select__selected-item 与 el-select__placeholder 两个类， -// 而上面占位符规则用了 !important，故此处必须同样 !important 才能胜出（本规则 specificity 更高）。 +// 已选中：选中文本用主文字色 #606266，与占位符明显区分。 +// 关键：Element Plus 的「选中值文本」与「占位符」共用同一个节点， +//
+// 只有未选值（或已展开但无搜索输入）时才会带 .is-transparent。 +// 因此这里必须排除 .is-transparent，否则未选值的占位符也会被染成选中色，与占位符灰无法区分。 // 仅作用于非禁用态，禁用态保留 Element Plus 的禁用灰（--el-select-disabled-color），避免被覆盖。 -.el-select__wrapper:not(.is-disabled) .el-select__selected-item { +.el-select__wrapper:not(.is-disabled) .el-select__selected-item:not(.is-transparent) { + color: #606266 !important; +} + +// 多选：选中项渲染为 el-tag，文字色由 tag 自身控制，上面规则覆盖不到，单独处理。 +.el-select__wrapper:not(.is-disabled) .el-select__tags-text { color: #606266 !important; }