解决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的安装 获取资源 …

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; 声明一个变量为…

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…

嵌入式系统------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. 作…

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

AI驱动测试管理工具会有哪些发展前景呢?

在软件测试领域&#xff0c;人工智能&#xff08;AI&#xff09;的出现犹如一场技术革命&#xff0c;改变了传统的测试管理方式。随着AI技术的迅速发展&#xff0c;它将如何进一步提升测试管理的效率与准确性&#xff1f;未来的AI驱动测试管理工具又会带来哪些令人期待的创新呢…

Postman环境变量:简化API测试的利器

引言 在当今快速发展的互联网时代&#xff0c;API&#xff08;应用程序接口&#xff09;的重要性不言而喻。无论是内部系统间的通信还是对外服务的提供&#xff0c;API都扮演着至关重要的角色。然而&#xff0c;在API的开发与测试过程中&#xff0c;经常需要处理各种各样的配置…

数学建模强化宝典(10)多元线性回归模型

一、介绍 多元线性回归模型&#xff08;Multiple Linear Regression Model&#xff09;是一种用于分析多个自变量&#xff08;解释变量、预测变量&#xff09;与单个因变量&#xff08;响应变量、被预测变量&#xff09;之间线性关系的统计模型。这种模型假设因变量的变化可以通…

ARM下汇编语言编程

一、ARM汇编语言程序格式 ARM汇编语言是以段(section)为单位来组织源文件的。段是相对独立的、具有特定名称的、不可分割的指令或者数据序列。 段又可以分为代码段和数据段&#xff0c;代码段存放执行代码&#xff0c;数据段存放代码运行时需要用到的数据。一个ARM源程序至少需…

4.1 数据分析-excel 基本操作

第四节&#xff1a;数据分析-excel 基本操作 课程目标 学会excel 基本操作 课程内容 数据伪造 产生一份招聘数据 import pandas as pd from faker import Faker import random import numpy as np# 创建一个Faker实例&#xff0c;用于生成假数据&#xff0c;指定中文本地…

CSS3 文本效果(text-shadow,box-shadow,white-space等)文本溢出隐藏并且显示省略号

一 text-shadow text-shadow 属性是 CSS3 中用于为文本添加阴影效果的工具。它可以增强文本的可读性和视觉吸引力&#xff0c;提供丰富的视觉效果 1 语法 text-shadow: offset-x offset-y blur-radius color;offset-x&#xff1a;阴影相对于文本的水平偏移量。可以是正值&am…