用响应式 ref 实现自动聚焦需绑定 ref、确保 DOM 就绪后调用 focus()。Element Plus 的 el-input 支持直接调用 focus() 方法，应在 nextTick 中执行；动态场景下需监听显示状态变化再聚焦，并可优化光标位置与滚动行为。
直接用响应式 ref 实现自动聚焦，核心是“绑定 + 确保时机 + 触发 focus”。Element Plus 的 <el-input> 本身不支持原生 autofocus（尤其在外层有 v-if、对话框或动态渲染场景下），所以必须靠 ref 主动控制。这不是单纯调一次 .focus() 就完事，而是一套兼顾 Vue3 响应式生命周期与 DOM 渲染节奏的协作逻辑。
用 ref 绑定并确保组件已挂载
在 setup 中声明 ref，并在模板中正确绑定：
<el-input ref="inputRef" v-model="searchText" />
const inputRef = ref(null)
关键点在于：ref 必须指向组件实例（不是原生 input），而 Element Plus 的 el-input 提供了 focus() 方法，可直接调用 —— 不需要手动查子节点。
常见错误是把 ref 指向了原生 <input>，比如用 ref="inputEl" 再加 inputEl.value.focus()，这在 Element Plus 中不可靠，因为内部结构封装了输入框。
在 nextTick 中触发 focus 保证 DOM 就绪
Vue3 的 onMounted 钩子只代表组件实例创建完成，不代表 DOM 已真实插入文档或样式已计算完毕。尤其当 el-input 外层有 transition、v-if 或 Dialog 弹窗时，inputRef.value 可能仍为 null 或未准备好。
正确做法是结合 nextTick：
import { onMounted, nextTick, ref } from 'vue'
onMounted(() => {
nextTick(() => {
if (inputRef.value) inputRef.value.focus()
})
})
这样能确保：组件已挂载 → 模板已渲染 → DOM 节点可访问 → 焦点可设置。
动态场景下监听显示状态再聚焦
对于模态框、折叠面板、Tab 切换等“条件性显示”的输入框，不能只依赖 onMounted。因为组件可能提前挂载，但 DOM 还没出现。
更稳妥的方式是监听一个响应式开关（如 dialogVisible），并在其变为 true 后执行聚焦：
const dialogVisible = ref(false)
watch(dialogVisible, (val) => {
if (val) {
nextTick(() => inputRef.value?.focus())
}
})
这个模式也适用于表格行内编辑、动态表单项、权限控制下的条件渲染等真实业务场景。
聚焦后光标位置与用户体验优化
默认 focus() 会将光标放在末尾。若希望清空后聚焦并全选，或聚焦到开头，可补充逻辑：
- 全选内容：
inputRef.value?.select() - 聚焦并置顶滚动（避免被遮挡）：
inputRef.value?.$el.scrollIntoView({ block: 'nearest' }) - 配合
clearable属性时，注意焦点可能被清除按钮的样式重绘短暂干扰，可加setTimeout(..., 0)微调（极少数情况）
这些细节能显著提升操作流畅感，尤其在表单密集型后台系统中。
