Element Plus Dialog中无法获取表单焦点

简介

在Dialog组件中，默认插槽是Form表单，表单子项是input,发现Dialog组件弹出时无法获取input焦点。

解决办法

1. 需要使用俩次nextTick
2. 使用定时器setTimeout也可以

分析结论

input获取焦点老生常谈的问题，直接一个nextTick完活！这里不行的原因是Dialog里面嵌套是Form表单,Form表单又嵌套的input组件，所以需要俩次下一次DOM更新后,第一次nextTick等待Form加载，第二次nextTick是等待input加载。

示例代码

//html
<el-dialog v-model="dialogFormVisible" :title="roleParams.id ? '修改角色' : '添加角色'">
	<el-form>
		<el-form-item label="角色名称" style="width: 80%">
			<el-input v-model="roleParams.roleName" ref="inputFocus" />
		</el-form-item>
	</el-form>
</el-dialog>

//ts
const addRole = () => {
	dialogFormVisible.value = true;
	nextTick(()=>{
		nextTick(()=>{
			inputFocus.value.focus()
		})
	})
};