gxwebsoft
a87b5e4b95
- 修改选择器为后代选择器以适配 avue 表单项的嵌套结构 - 统一弹窗内表单标签宽度，避免 labelWidth: 'auto' 导致控件宽度不一 - 新增全局样式规则，固定标签宽度为 calc(4em + 24px) - 删除用于调试控件宽度的临时文件 cascader-width-check.html - 记录并说明 avue 弹窗宽度调整相关坑点和解决方案
19 lines
2.8 KiB
Markdown
19 lines
2.8 KiB
Markdown
# 2026-10-13
|
||
|
||
## 车辆调度弹窗：使用部门级联选择器宽度对齐
|
||
|
||
- 现象：`/transportCapacity/vehicle-dispatch` 新增/编辑弹窗中，使用部门 `el-cascader` 明显窄于同行车牌号 `el-input`。
|
||
- 根因：`el-cascader` 是 `display: inline-block` 宽度按内容收缩（不像 `el-autocomplete` / `el-input` 有 `--el-input-width: 100%` 兜底）；而页面里写的 `.vehicle-dispatch-page :deep(.vehicle-dispatch-form-control){width:100%}` 命中不到 —— avue-crud 弹窗默认 `append-to-body: true`（`append-to-body": validData(crud.tableOption.dialogAppendToBody, true)`），DOM Teleport 到 body，已不在 `.vehicle-dispatch-page` 之下。
|
||
- 修法（走项目既有约定）：
|
||
1. `src/option/transportCapacity/vehicle-dispatch.js` 增加 `dialogCustomClass: 'vehicle-dispatch-dialog'`；
|
||
2. `src/styles/element-ui.scss` 增加全局规则 `.vehicle-dispatch-dialog .el-form-item__content > .el-cascader { width:100%; max-width:100% }`。
|
||
- 自检：dev(2889) `curl /src/styles/element-ui.scss` 与 `/src/option/transportCapacity/vehicle-dispatch.js` 均 200，编译产物含新规则。
|
||
- 遗留观察：同文件里 `.vehicle-dispatch-page :deep(.avue--detail ...)` 那一批查看态禁用样式，同样因 Teleport 属死规则（未改，待确认是否需要迁到 `.vehicle-dispatch-dialog` 作用域）。
|
||
|
||
## 追加修正（同日 20:xx）：第一次改完用户反馈「还是没对齐」
|
||
|
||
- 原因一：选择器写成了 `.el-form-item__content > .el-cascader`（直接子级）。**avue 表单项在 `el-form-item__content` 与控件之间还有两层包裹 div**（`packages/element-plus/form/index3.js`：content > div > [div|elTooltip] > 控件），必须用后代选择器。已改成 `.vehicle-dispatch-dialog .el-form-item__content .el-cascader`。
|
||
- 原因二（更隐蔽）：option 用 `labelWidth: 'auto'`，**EP 的 auto 是逐项计算**（实测：3 字 54/64px、2 字 40px、4 字无星号 68px、4 字带星号 78px），label 越宽控件可用宽度越小 → 车牌号 input 486px、使用部门 cascader 472px，仍差 14px。已加 `.vehicle-dispatch-dialog .el-form-item__label { flex: 0 0 calc(4em + 24px) !important; width: calc(4em + 24px) !important }`（本弹窗左右两列最长 label 均为 4 汉字）。
|
||
- 验证方式（可复用）：临时在项目根建 `cascader-width-check.html`，Vite 直接服务 → `import './src/option/...'` 用真实 option + `import './src/styles/element-ui.scss'`，挂 avue-crud 并 `mounted(){ this.$refs.crud.rowAdd() }` 弹出真实弹窗；用 agent-browser（`/Users/gxwebsoft/.workbuddy/binaries/node/workspace/node_modules/.bin/agent-browser`）`open` + `eval` 读 DOM 链路与 `getBoundingClientRect`。修完已删除该临时文件。
|
||
- 结果：全部 label 80px，车牌号 input 与使用部门 cascader 均为 left=732 / width=470 / right=1202，完全一致。
|