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

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

javascript 复制代码
<template>
  <el-table
    :data="tableData"
    @cell-click="cellclickHandle"
  >
	<el-table-column prop="text" label="编辑" align="right">
      <template #default="{ row }">
        <el-input
          v-focus
          style="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 } = column
  if (!["text"].includes(property)) return
  cacheRow = JSON.parse(JSON.stringify(row))
  if (property === "text") {
    row.isEdit = true
  } 
}

const cellBlur = async (input, row) => {
  row.isEdit = false
  if (cacheRow.text == row.text) return
  await ...
  ElMessage.success("编辑成功")
}
</script>

<style lang="scss" scoped>
</style>
相关推荐
Sheldon一蓑烟雨任平生23 分钟前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
孤狼warrior1 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉2 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5202 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck2 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
华仔啊2 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
Sheldon一蓑烟雨任平生3 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
CsharpDev-奶豆哥3 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai7 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书7 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript