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

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

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

相关文章

进来一起把【数据结构】的【栈与队列】狠狠玩弄,痛快到大汗淋漓

1前言&#xff1a;顾名思义&#xff0c;栈与队列是两个东西&#xff0c;栈和队列&#xff01;对的&#xff0c;栈和队列&#xff01;&#xff01;&#xff0c;没错&#xff0c;在念一遍&#xff0c;【栈】 和 【队列】&#xff01;&#xff01;&#xff01;但是本质都是差…

数字化转型工具有哪些 无锡振宁科技

数字化转型已经成为现代企业不可忽视的趋势。为了帮助企业在这个过程中取得成功&#xff0c;选择合适的工具至关重要。今天&#xff0c;无锡振宁科技想和大家聊聊一些在数字化转型中不可或缺的工具&#xff0c;以及它们具体能带来哪些优势和变化。 1. 云计算平台 云计算是数字…

Yapi部署文档

Yapi是高效、易用、功能强大的API管理平台&#xff0c;旨在为开发、产品、测试人员提供更优雅的接口管理服务 官网地址&#xff1a;Yapi 环境&#xff1a; l Git l NodeJs&#xff08;7.6&#xff09; l Mongodb&#xff08;2.6&#xff09; 1、 NodeJs的安装 获取资源 …

第十八章程序清单合集——Java语言程序设计基础篇

目录 程序清单18_1ComputeFactorial.java 程序清单18_2ComputeFibonacci.java 程序清单18_1ComputeFactorial.java package chapter_18;import java.util.Scanner;public class 程序清单18_1ComputeFactorial {public static void main(String[] args) {Scanner input new S…

webpack打包报错UglifyJs Unexpected token: punc (,)

项目当dev命令运行时能正常运行&#xff0c;打包后却报错UglifyJs Unexpected token: punc (,)&#xff0c; > yarn buildCreating an optimized production build... Failed to compile.Failed to minify the bundle. Error: static/js/main.js from UglifyJs Unexpected …

VBA学习(71):Excel VBA 访问带密码保护的Access数据库/用户窗体设置/EXCEL用户+密码登录界面(Access版)

前两天我们分享了一个用户密码登录EXCEL的案例【Excel VBA 用户窗体设置/一步一步代你设计EXCEL用户密码登录界面】&#xff0c;文中提及数据存储在Access中的情况&#xff0c;今天我就来把数据表&#xff08;tb用户&#xff09;移到Access中&#xff0c;修改一下代码&#xff…

cortex-m4系列绝对地址函数跳转问题

一、环境&#xff1a; cortex-m4&#xff0c;IAR&#xff0c;J-LINK。 二、问题&#xff1a; 1&#xff09;、首先&#xff0c; 我将另一个程序中的函数扣出来&#xff0c;通过j-flash-lite下载到MCU的一个固定地址Flash中。 2&#xff09;、然后&#xff0c; 声明一个变量为…

力扣刷题--821. 字符的最短距离【简单】

题目描述&#x1f357; 给你一个字符串 s 和一个字符 c &#xff0c;且 c 是 s 中出现过的字符。 返回一个整数数组 answer &#xff0c;其中 answer.length s.length 且 answer[i] 是 s 中从下标 i 到离它 最近 的字符 c 的 距离 。 两个下标 i 和 j 之间的 距离 为 abs(i…

Elastic Stack--ELFK实例与Dashboard界面

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 学习B站博主教程笔记&#xff1a; 最新版适合自学的ElasticStack全套视频&#xff08;Elk零基础入门到精通教程&#xff09;Linux运维必备—Elastic…

低代码技术:简化应用开发,推动数字化转型

在当今快速变化的技术环境中&#xff0c;企业面临着巨大的压力&#xff0c;需要快速响应市场需求并持续推动数字化转型。传统的应用开发方式往往复杂且耗时&#xff0c;开发周期长且需要大量的编程工作。为了应对这些挑战&#xff0c;低代码技术应运而生&#xff0c;为企业提供…

oracle startup失败,ORA-01078: failure in processing system parameters

SQL> startup ORA-01078: failure in processing system parameters LRM-00109: could not open parameter file /data/oracle/product/11.2.0/db_1/dbs/initorc1.ora 出错的原因可能是&#xff1a;文件名字不正确&#xff0c;文件权限不对&#xff0c;文件不存在&#x…

基于激光雷达的无人机相互避障

本框架是基于激光雷达的无人机群自主避障代码&#xff1a; 其主体框架利用ORCA算法&#xff0c;他是经典的多智能体相互避障算法&#xff0c;此版本只能规避动态障碍物&#xff0c;不能规避环境形成的静态障碍物我们对ORVA算法稍作修改&#xff0c;使其可以分布式部署&#xff…

嵌入式系统------ARM

目录 一.c语言回顾 1.特殊符号 &#xff08;1&#xff09;const &#xff08;2&#xff09;static &#xff08;3&#xff09;extern 2.内存的结构 &#xff08;1&#xff09;kernel&#xff1a;内核 &#xff08;2&#xff09;栈区 &#xff08;3&#xff09;堆区 &#xff08…

Mental-LLM——通过在线文本数据利用大型语言模型进行心理健康预测

概述 源码地址&#xff1a;https://github.com/neuhai/Mental-LLM.git 论文地址&#xff1a;https://arxiv.org/abs/2307.14385 在一项关于哪些法律硕士适合精神健康护理的研究中&#xff0c;对以下五种法律硕士进行了比较 羊驼-7b。羊驼-LoRA。FLAN-T5-XXLGPT-3.5GPT-4. 作…

人该怎样活着呢?48

人该怎样活着呢&#xff1f; A多观察多思考 【思考问答】 &#xff08;20240411&#xff09; B记录自己的灵感。 &#xff08;20240412&#xff09; 别人抢不走的东西&#xff1a;肚子里的食物&#xff0c;脑子里的知识&#xff0c;还有梦想&#xff08;202011…

爬虫常用模板

这里记录的是我学习爬虫自己用到的一些东西&#xff0c;方便以后打开直接使用。我会不定期的往里面添加内容。 爬虫工具库-spidertools.cn 协程 模板1&#xff08;通过loop&#xff09;&#xff1a; async def download()passasync def main():# 创建任务队列tasks []for.…

Qt QPushButton 按钮添加数字气泡

使用场景 项目中&#xff0c;在某个按钮的右上角添加数字气泡是一个很常见的功能&#xff0c;可以用新建一个组合类来实现。不过这样比较麻烦&#xff0c;如果加气泡是后面的需求&#xff0c;可能改动的地方较多。 下面介绍2种比较简单&#xff0c;不需要改动按钮响应的方式。…

docker安装prometheus、grafana监控SpringBoot

1. 概述 最新有一个需求&#xff0c; 需要安装一个监控软件&#xff0c;对SpringBoot程序进行监控&#xff0c; 包括机器上cpu, 内存&#xff0c;jvm以及一些日志的统计。 这里需要介绍两款软件&#xff1a; prometheus 和 grafana prometheus: 中文名称&#xff0c; 普罗米…

Excel 将行和列转置的两种方法

方法一&#xff1a; 方法二&#xff1a;使用transpose公式

Unity数据持久化 之 文件操作(增删查改)

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正​​ 这里需要弄清几个概念&#xff1a; File&#xff1a;提供文件操作的静态方法&#xff0c;是管理的 Windows.File -…