解决el-table中使用el-input无法聚焦问题

本文主要是介绍解决el-table中使用el-input无法聚焦问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在el-table中点击单元格时使用el-input或其他表单组件编辑单条数据。会出现聚焦不上的问题，需要手动点击才能够聚焦。究其原因是因为点击单元格时页面已自动聚焦到单元格，此时无法自动聚焦到对应的表单，需要手动设置。

在这里插入图片描述

<template><el-table:data="tableData"@cell-click="cellclickHandle"><el-table-column prop="text" label="编辑" align="right"><template #default="{ row }"><el-inputv-focusstyle="height: 20px"v-model="row.text"@blur="cellBlur(1, row)"v-if="row?.isEdit ?? false"/><span v-else>{{ row.text }}</span></template></el-table-column></el-table>
</template><script setup>
import { reactive } from "vue"....//自定义指令
const vFocus = {mounted: el => {//清除el-table的cell聚焦document.activeElement.blur()const targetInput = el.getElementsByTagName("input")[0]targetInput.focus()}
}//表格点击
let cacheRow = reactive({})
const cellclickHandle = (row, column) => {const { property } = columnif (!["text"].includes(property)) returncacheRow = JSON.parse(JSON.stringify(row))if (property === "text") {row.isEdit = true} 
}const cellBlur = async (input, row) => {row.isEdit = falseif (cacheRow.text == row.text) returnawait ...ElMessage.success("编辑成功")
}
</script><style lang="scss" scoped>
</style>