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

news2025/4/19 13:34:05

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

在这里插入图片描述

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2104051.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微积分-积分应用5.2(体积)

在尝试找到一个固体的体积时&#xff0c;我们面对的问题与寻找面积时相同。我们对体积的概念有直观的理解&#xff0c;但我们必须通过使用微积分来精确定义体积。 我们从一种简单类型的固体——称为柱体&#xff08;或更准确地说&#xff0c;直柱体&#xff09;——开始。如图…

U盘格式化后还能恢复数据吗?如何有效找回数据

在日常工作和生活中&#xff0c;我们经常会使用U盘来存储和传输重要的数据。然而&#xff0c;有时由于误操作或病毒攻击等原因&#xff0c;我们可能会不小心格式化U盘&#xff0c;从而丢失存储在其中的重要数据。很多人会疑惑&#xff0c;U盘格式化后&#xff0c;是否还能恢复丢…

PLC工业网关在钢铁企业生产过程中的应用-天拓四方

在当今工业自动化领域&#xff0c;PLC工业网关已经成为了提升生产效率、确保产品质量、增强系统可靠性的关键组件。本文旨在通过一个具体的工业应用实例&#xff0c;深入探讨PLC工业网关的功能、优势及其在现代工业环境中的重要作用&#xff0c;从而展示其在实际操作中的专业性…

教育行业解决方案:智能PPT在教育行业的创新应用

在信息化时代&#xff0c;教育行业面临着巨大的变革。随着人工智能技术的不断发展&#xff0c;传统教学方式正在被重新定义。彩漩科技作为 AI 技术的先行者&#xff0c;推出了歌者 PPT &彩漩 PPT&#xff0c;为教师、学生和家长提供了一种全新的教育体验&#xff0c;实现了…

【C++】STL学习——vector模拟实现

目录 vector介绍vector函数接口总览结构介绍默认成员函数构造函数1构造函数2构造函数3经典的深浅拷贝拷贝构造赋值重载析构函数 迭代器begin和end 容量相关函数sizecapacityemptyreserveresize 访问operator[] 修改相关函数insertpush_backerasepop_backclearswap 迭代器失效问…

TPM在解决哪些类型的问题时最有效?

在探讨TPM&#xff08;Total Productive Maintenance&#xff0c;全面生产维护&#xff09;在解决哪些类型问题时最为有效时&#xff0c;我们首先需要明确TPM的核心原则和目标。TPM作为一种综合性的设备管理和维护体系&#xff0c;旨在通过全员参与、全系统、全效率的方式&…

【计算机网络】socket编程 --- 实现简易TCP网络程序

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

使用 nuxi generate 进行预渲染和部署

title: 使用 nuxi generate 进行预渲染和部署 date: 2024/9/4 updated: 2024/9/4 author: cmdragon excerpt: 通过 nuxi generate 命令,你可以轻松地将 Nuxt 应用程序预渲染为静态 HTML 文件,并将其部署到任何静态托管服务。这种方法可以提高应用程序的性能和安全性,特别…

科学计算基础软件包Numpy介绍及常用法

1.介绍及说明 NumPy 是一个开源的 Python 库&#xff0c;专门用于科学计算和数值处理。它提供了强大的多维数组对象和丰富的函数库&#xff0c;支持高效的数组运算。NumPy 是许多其他科学计算库&#xff08;如 SciPy、Pandas、Matplotlib 等&#xff09;的基础。以下是对 NumPy…

【开源大模型生态4】大模型和安卓时刻

开源大模型&#xff0c;指基于开源软件模式&#xff0c;由全球开发者共同参与、共同维护、共同发展的机器学习模型。 我们之前有过关于开源大模型和对应开源协议的探讨&#xff1a; 【AI】马斯克说大模型要开源&#xff0c;我们缺的是源代码&#xff1f;&#xff08;附一图看…

‌智慧公厕:城市文明的智慧新篇章‌@卓振思众

在日新月异的城市化进程中&#xff0c;公共设施的智能化升级已成为不可逆转的趋势。其中&#xff0c;智慧公厕作为城市智慧化建设的重要组成部分&#xff0c;正悄然改变着我们的生活。智慧公厕&#xff0c;这一融合了物联网、大数据、云计算等现代信息技术的创新产物&#xff0…

数学建模常见模型(下)

目录 神经网络法详细介绍 1. 引言 2. 神经网络的基本概念 2.1 神经元 2.2 层次结构 2.3 激活函数 3. 神经网络的工作原理 3.1 前向传播 3.2 反向传播 4. 神经网络的类型 4.1 前馈神经网络&#xff08;Feedforward Neural Networks, FNN&#xff09; 4.2 卷积神经网…

云计算之存储

目录 一、产品介绍 1.1 对象存储oss 1.2 特点 二、产品技术背景 三、产品架构及功能 四、常见问题及排查思路 4.1 两个bucket目录文件如何快速复制&#xff1f; 4.2 oss里的目录如何删除&#xff1f; 4.3 能否统计oss一个目录的大小 4.4 异常诊断 - 上传下载速度慢 4…

开源项目|聚合支付工具,封装了某宝、某东、某银、PayPal等常用的支付方式

前言 IJPay是一款开源的支付SDK&#xff0c;它集成了微支付、某宝支付、银联支付等多种支付方式&#xff0c;为开发者提供了一种简单、高效的方式来处理支付问题。以下是IJPay的一些主要特点&#xff1a; 支持多种支付方式&#xff1a;IJPay支持微信支付、支付宝支付、银联支付…

ffmpeg命令(详解)

欢迎诸位来阅读在下的博文~ 在这里&#xff0c;在下会不定期发表一些浅薄的知识和经验&#xff0c;望诸位能与在下多多交流&#xff0c;共同努力 文章目录 一、常见命令二、实战三、总结 一、常见命令 ffmpeg -i input.mp4 -c copy output.mp4解释&#xff1a;-i 后面接输入文…

应用在蓝牙耳机中的低功耗DSP音频处理芯片-DU561

在当今社会&#xff0c;随着科技的不断发展&#xff0c;人们对于电子产品的需求也在日益增长。蓝牙耳机就是将蓝牙技术应用在免持耳机上&#xff0c;让使用者可以免除恼人电线的牵绊&#xff0c;自在地以各种方式轻松通话。自从蓝牙耳机问世以来&#xff0c;一直是行动商务族提…

【递归、回溯专题(二)】DFS解决floodfill算法

文章目录 1. 图像渲染2. 岛屿数量3. 岛屿的最大面积4. 被围绕的区域5. 太平洋大西洋水流问题6. 扫雷游戏7. 机器人的运动范围 1. 图像渲染 算法原理&#xff1a; 这题不需要创建visit数组去记录使用过的节点&#xff0c;因为我每次dfs都尝试修改image数组的值&#xff0c;当下…

[Linux]:权限

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 1. Linux权限的基本概念 1.1 root与普通用户 在Linux系统中&#xff0c;存在…

内部知识库:企业智慧资产的安全守护者

引言 在知识经济时代&#xff0c;企业的核心竞争力越来越依赖于其知识资源的积累、管理和利用。内部知识库&#xff0c;作为企业知识管理的重要组成部分&#xff0c;扮演着智慧资产守护者的关键角色。它不仅承载着企业多年来的经验积累、技术创新和业务流程知识&#xff0c;还…

2024年“羊城杯”粤港澳大湾区网络安全大赛 初赛 Web数据安全AI 题解WriteUp

文章首发于【先知社区】&#xff1a;https://xz.aliyun.com/t/15442 Lyrics For You 题目描述&#xff1a;I have wrote some lyrics for you… 开题。 看一下前端源码&#xff0c;猜测有路径穿越漏洞 http://139.155.126.78:35502/lyrics?lyrics../../../../../etc/passw…