级联下拉选择需手动控制数据流、动态触发加载、精准定位选项容器，各级通过事件或props通信，支持异步加载、动态新增、视觉一致性及键盘/移动端适配。
自定义元素实现级联下拉选择，核心在于“手动控制数据流 + 动态触发加载 + 精准定位选项容器”。它不依赖原生 <select> 的层级绑定机制，而是用 DOM 交互和状态管理模拟出“选 A → 触发请求 → 渲染 B → 选 B → 触发请求 → 渲染 C”的链式逻辑。
识别并封装每一级的触发与响应结构
级联不是自动发生的，得靠你明确定义每级之间的依赖关系。比如一级选“省份”后，二级才开始加载“城市”，三级才等二级选完再加载“区县”。关键点是：每级下拉框都应是一个独立可复用的自定义元素（如 <custom-select>），但它们之间通过 props 或事件通信串联。
- 一级组件只负责展示固定列表（如所有省份），选中后派发
change事件，携带value和level: 1 - 二级组件监听一级的变更，收到值后调用 API 获取对应城市列表，并清空自身已选项和下级内容
- 三级组件同理，但它的数据源由二级的
value决定，且需确保二级有有效值才启用 - 任一级被清空时，必须向下游广播清除指令（例如触发
clear:level2事件），避免残留脏数据
处理非标准 DOM 结构下的选项定位
多数 UI 框架（如 Element Plus、Ant Design）的级联下拉实际渲染在 <body> 底部，选项不在父级元素内部。自定义组件必须能跨层级捕获这些动态插入的节点。
- 不用
querySelector直接找子元素，改用全局唯一标识符定位：给每个下拉触发器加data-level="2"，再用document.querySelectorAll('[data-level="2"] .el-select-dropdown__item')获取真实选项 - 监听下拉展开事件（如
mouseenter或框架提供的visible-change），在弹层出现后再执行选项点击，避免点击空白 - 对异步加载的选项，加简单轮询或 MutationObserver 监听
.dropdown-menu或.el-select-dropdown内容变化，确认列表就绪再操作
支持动态新增与即时回填
用户选不到想要的项时，需要“边选边加”。这要求组件不只是展示，还要介入数据生命周期。
- 在下拉面板底部插入一个“+ 新增”按钮，点击后弹出轻量表单（不跳页），提交后立即调用接口创建新条目
- 成功后，把新数据
unshift到当前级的 options 数组，并强制刷新下拉列表（Vue 中用key重置或nextTick后更新 v-model） - 若新增项需作为当前选中值，直接赋值给对应 level 的绑定变量，并触发下一级加载（例如：新增了“雄安新区”，则自动加载其下属街道）
- 注意防重复：提交前校验名称是否已存在，避免后端报错或前端重复渲染
保持视觉与交互一致性
自定义组件容易显得“像拼凑的”，关键在细节对齐。
- 尺寸、圆角、阴影、禁用态样式完全复刻所用 UI 库的规范，不要自己另起一套
- 下拉箭头、加载动画、无数据提示文案，全部使用框架默认语义（如
el-icon-arrow-down、loading...） - 键盘支持不可少：Tab 进入、ArrowDown/Up 移动焦点、Enter 确认、Escape 关闭——这些行为要手动绑定，不能只靠鼠标
- 移动端需额外适配：弹层用
position: fixed+top: env(safe-area-inset-top)避免遮挡刘海屏
