vue3自动聚焦的问题

要求：页面存在一个按钮，点击按钮后，按钮切换成输入框，需要自动聚焦到出现的该输入框

有很多种方法，比如this.$ref.....(内置属性自动聚焦）；设置id，获取到该标签，然后标签.foucs()

我这里采取的是获取标签然后手动设置聚焦。

        <el-table-column prop="tag" label="标签" height="100">
            <template #default="scope">
                <p></p>
                <el-button v-if="scope.row.show_add" class="my-tag" @click.focus="add(scope.row)">+Tag</el-button>
                <el-input v-else style="display: inline" type="text"></el-input>
                <div class="my-tag-box" v-for="(s, index) in scope.row.tag" :key="index">
                    {{ s }}
                </div>
                <p></p>
            </template>
        </el-table-column>

    setTimeout(() => {
        const inputElement = document.getElementsByTagName("input")[index];
        if (inputElement) {
            inputElement.focus();
        }
    });