el-input 自动获取焦点

前言：

需求描述：在 Dialog 对话框中使用 input 组件；当点击按钮，Dialog 对话框显示，且里面的 input 组件要自动获取焦点。因为页面上还存在其他的 input 组件，所以使用自动获取焦点属性没用！！

解决方案：

使用了 Dialog 组件关闭即销毁属性还是不行，最后通过在 Dialog 组件上使用 v-if 达到自己想要的效果

<template><div class="search_box" @click="openDialog"><el-icon><Search /></el-icon><span>搜索</span></div><el-dialogv-model="dialogTableVisible"top="6vh":show-close="false"destroy-on-closev-if="dialogTableVisible"><el-inputv-model="input3"style="max-width: 600px"placeholder=""class="input-with-select"ref="input_dom"@keyup.enter="searchByWord"><template #prepend><el-select v-model="select" placeholder="搜索内容" style="width: 115px"><el-option label="卡片搜索" value="1" /><el-option label="内容搜索" value="2" /></el-select></template></el-input></el-dialog>
</template>
<script>
import { Search } from "@element-plus/icons-vue";
export default {data() {return {dialogTableVisible: false,select: "1",input3: null,};},components: {Search,},methods: {searchByWord() {this.$emit("ChangeSearch", {value: this.select,querySearch: this.input3,});this.dialogTableVisible = false;},openDialog() {this.dialogTableVisible = true;this.$nextTick(() => {this.$refs.input_dom.focus();});},},
};
</script>
<style lang="scss" scoped>
.search_box {display: flex;align-items: center;cursor: pointer;
}
</style>

核心代码：