当前位置： 首页 > news >正文

Vue 3 动态 ref 的使用方式（表格）

news 来源：原创 2025/6/2 6:24:47

一、问题描述

先给大家简单介绍一下问题背景。我正在开发的项目中，有一个表格组件，其中一列是分镜描述，需要支持视频上传功能。用户可以为每一行的分镜描述上传对应的视频示例。然而，在实现过程中，出现了一个严重的问题：当表格有多行数据时，点击某一行的本地上传按钮，选择文件后，数据却总是跑到最后一行。这显然不符合预期，严重影响了用户体验和功能的正确性。

二、解决

1、创建了一个inputRefs对象来存储input元素的引用： 

const shotVideInputRefs = ref<Record<string, HTMLInputElement>>({});

2、在模板中，通过以下方式绑定ref：

<input :key="row.id" :ref="(el) => (shotVideInputRefs[row.id] = el as HTMLInputElement)" type="file" @change="handleShotFileChange(row, $event)" />

3、触发文件上传对话框的方法：根据当前行的id来获取对应的input引用并触发点击事件：

const triggerShotVideoInput = (rowId) => {if (shotVideInputRefs.value[rowId]) {shotVideInputRefs.value[rowId].click();}};

 

相关文章：

Vue 3 动态 ref 的使用方式（表格）

一、问题描述 先给大家简单介绍一下问题背景。我正在开发的项目中&#xff0c;有一个表格组件&#xff0c;其中一列是分镜描述&#xff0c;需要支持视频上传功能。用户可以为每一行的分镜描述上传对应的视频示例。然而&#xff0c;在实现过程中&#xff0c;出现了一个严重的问…...

编程日记 2025/6/2 6:24:47

FAST-DDS源码分析PDP（一）

准备开一个FAST-DDS源码分析系列&#xff0c;源码版本FAST-DDS 1.1.0版本。 FAST-DDS这种网络中间件是非常复杂的&#xff0c;所以前期先去分析每个类的作用是什么&#xff0c;然后在结合RTPS DOC&#xff0c;FAST-DDS DEMO,以及FAST-DDS的doc去串起来逻辑。 Builtin Discovery…...

编程日记 2025/5/23 23:49:31

Flutter与Kotlin Multiplatform（KMP）深度对比及鸿蒙生态适配解析

Flutter 与 Kotlin Multiplatform&#xff08;KMP&#xff09;深度对比及鸿蒙生态适配解析 在跨平台开发领域&#xff0c;Flutter 与 Kotlin Multiplatform&#xff08;KMP&#xff09;代表了两种不同的技术路线&#xff1a;前者以 “统一 UI 体验” 为核心&#xff0c;后者以…...

编程日记 2025/5/30 17:02:06

深入了解linux系统—— 基础IO（上）

文件 在之前学习C语言文件操作时&#xff0c;我们了解过什么是文件&#xff0c;这里简单回顾一下&#xff1a; 文件存在磁盘中&#xff0c;文件有分为程序文件、数据文件&#xff1b;二进制文件和文本文件等。 详细描述见文章&#xff1a;文件操作——C语言 文件在磁盘里&a…...

编程日记 2025/5/26 19:05:14

C++ map multimap 容器：赋值、排序、大小与删除操作

概述 map和multimap是C STL中的关联容器&#xff0c;它们存储的是键值对(key-value pairs)&#xff0c;并且会根据键(key)自动排序。两者的主要区别在于&#xff1a; map不允许重复的键multimap允许重复的键 本文将详细解析示例代码中涉及的map操作&#xff0c;包括赋值、排…...

编程日记 2025/5/22 19:56:43

EmuEdit

EmuEdit详解&#xff1a;统一多任务图像编辑的扩展性范式 引言&#xff1a;图像编辑的困境 近年来&#xff0c;扩散模型&#xff08;Diffusion Models&#xff09;在图像合成和编辑方面取得了巨大进展&#xff0c;如 Prompt-to-Prompt (P2P)、InstructPix2Pix、DiffEdit 等方法…...

编程日记 2025/5/27 6:30:12

Linux编译rpm包与deb包

注意&#xff1a; 本文内容于 2025-05-14 23:55:53 创建&#xff0c;可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容&#xff0c;请访问原文地址&#xff1a;编译rpm包与deb包。感谢您的关注与支持&#xff01; 近期在通过源码编译安装一些软件包时&#…...

编程日记 2025/5/29 20:25:20

GitHub 趋势日报 (2025年05月17日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1TapXWorld/ChinaTextbookPDF教材。⭐ 2471⭐ 22302Roff2public-apis/public-a…...

编程日记 2025/5/31 8:32:13

[创业之路-362]：企业战略管理案例分析-3-战略制定-华为使命、愿景、价值观的演变过程

一、华为使命、愿景、价值观的演变过程 1、创业初期&#xff08;1987 - 1994 年&#xff09;&#xff1a;生存导向&#xff0c;文化萌芽 使命愿景雏形&#xff1a;1994年华为提出“10年之后&#xff0c;世界通信行业三分天下&#xff0c;华为将占一份”的宏伟梦想&#xff0c…...

编程日记 2025/5/29 8:58:45

Android 性能优化入门（二）—— 内存优化

1、概述 1.1 Java 对象的生命周期 各状态含义&#xff1a; 创建&#xff1a;分配内存空间并调用构造方法应用&#xff1a;使用中&#xff0c;处于被强引用持有&#xff08;至少一个&#xff09;的状态不可见&#xff1a;不被强引用持有&#xff0c;应用程序已经不再使用该对象…...

编程日记 2025/5/31 9:00:15

(5)python爬虫--BeautifulSoup(bs4)

文章目录 [TOC](文章目录) 前言一、安装bs4二、bs4的基础使用2.1 创建soup对象2.2 根据标签名查找节点2.3 根据函数来查找节点1. find函数2. find_all函数3. select函数 三、使用bs4获取节点信息3.1 获取节点内容3.2 获取节点的属性3.3 获取节点的属性值 四、测试练习 总结 前言…...

编程日记 2025/5/28 16:28:55

如何利用DeepSeek提升工作效率

1. 代码开发辅助 1.1 代码生成 根据需求描述生成代码框架 自动补全代码片段 生成单元测试用例 创建项目文档 1.2 代码优化 代码重构建议 性能优化方案 最佳实践推荐 设计模式应用 2. 问题诊断与解决 2.1 错误分析 编译错误解析 运行时错误诊断 内存泄漏检测 性…...

编程日记 2025/5/26 10:54:33

游戏引擎学习第292天:实现蛇

每次VLC 读取OSD 会有bug 修复一下 回顾并计划实现一种漂浮的移动方式&#xff0c;并制作一个贪吃蛇 虽然不完全记得之前具体计划&#xff0c;但感觉是想实现一个小蛇形生物&#xff0c;之前一直没来得及做。我们还打算让熟悉的伙伴能漂浮移动&#xff0c;所以今天会继续进行一…...

编程日记 2025/5/30 23:14:15

菱形继承原理

在C中&#xff0c;菱形继承的内存模型会因是否使用虚继承产生本质差异。我们通过具体示例说明两种场景的区别&#xff1a; 一、普通菱形继承的内存模型 class A { int a; }; class B : public A { int b; }; class C : public A { int c; }; class D : public B, public C { i…...

编程日记 2025/5/28 8:02:31

C++编程起步项目

员工信息管理系统 需求 Employee.h #pragma once#include<iostream> #include<string>using namespace std;class Employee { public:int id; // 编号string name; // 姓名string position; // 岗位int deptId; // 部门编号Employee();Employee(int id, string n…...

编程日记 2025/5/23 19:05:14

c++编写中遇见的错误

目录 一.获取动态数组的长度二.编译错误三、内存泄露 一.获取动态数组的长度 首先想到获取数组的长度的代码是&#xff1a; sizeof(arr) / sizeof(arr[0]);但是当将其使用到动态数组上时就会产生错误&#xff1b; int* help new int[3];for (int i 0; i < 3; i) {help[…...

编程日记 2025/5/31 5:15:30

股票数据源对接技术指南：印度尼西亚、印度、韩国

一、多国数据对接全景图 1. 核心数据领域对比 国家金融市场数据源宏观经济指标特色数据资源印度NSE/BSE实时行情RBI经济统计库UPI支付数据/GST税务记录印尼IDX交易所数据流BPS官方统计棕榈油产业数据/群岛物流信息韩国KRX综合指数KOSTAT国家统计K-POP消费趋势/半导体出口数据…...

编程日记 2025/5/30 8:46:05

常见面试题：Webpack的构建流程简单说一下。

文章目录 前言一、Webpack 的核心使命&#xff1a;模块化打包二、Webpack 构建流程详解三、构建流程的可视化演示项目结构构建流程图 四、构建流程中的关键技术点1. 依赖图的构建与优化2. 哈希与缓存策略3. 开发环境优化 五、简易版概括构建流程 总结 前言 在前端工程化中&…...

编程日记 2025/5/25 16:45:03

Elasticsearch基础篇-java程序通过RestClient操作es

目录 1.引入 2 初始化RestClient 1&#xff09;引入es的RestHighLevelClient依赖&#xff1a; 2&#xff09;因为SpringBoot默认的ES版本是7.17.10&#xff0c;所以我们需要覆盖默认的ES版本&#xff1a; 3&#xff09;初始化RestHighLevelClient&#xff1a; 4&#xff09…...

编程日记 2025/5/29 10:21:18

SuperYOLO：多模态遥感图像中的超分辨率辅助目标检测之论文阅读

摘要 在遥感影像&#xff08;RSI&#xff09;中&#xff0c;准确且及时地检测包含数十像素的多尺度小目标仍具有挑战性。现有大多数方法主要通过设计复杂的深度神经网络来学习目标与背景的区分特征&#xff0c;常导致计算量过大。本文提出一种兼顾检测精度与计算代价的快速准确…...

编程日记 2025/6/1 10:36:50

k6学习k6学习k6学习k6学习k6学习k6学习

1.安装go 2.安装 xk6 (k6 扩展构建工具): go install go.k6.io/xk6/cmd/xk6latest3.构建自定义 k6 二进制文件&#xff08;集成 faker 扩展&#xff09;: xk6 build --with github.com/gkarthiks/xk6-fakerlatest构建报错处理&#xff08;代码拉取失败&#xff09;&#xff1…...

编程日记 2025/5/28 10:12:01

ubuntu 安装mq

一、安装依赖 编译 Erlang 需要以下依赖库和工具&#xff1a; sudo apt update sudo apt install -y build-essential autoconf libncurses5-dev libssl-dev m4 unixodbc-dev libwxgtk3.0-gtk3-dev libgl1-mesa-dev libglu1-mesa-dev 二、解压源码包 tar -xzvf otp_src_21.…...

编程日记 2025/5/28 15:06:59

优化 Spring Boot 应用启动性能的实践指南

1. 引言 Spring Boot 以其“开箱即用”的特性深受开发者喜爱，但随着项目复杂度的增加，应用的启动时间也可能会变得较长。对于云原生、Serverless 等场景而言，快速启动是一个非常关键的指标。 2. 分析启动过程 2.1 启动阶段概述 Spring Boot 的启动流程主要包括以下几个阶…...

编程日记 2025/5/20 15:16:13

ubuntu18.04编译qt5.14.2源码

ubuntu18.04编译qt5.14.2源码 文章目录 ubuntu18.04编译qt5.14.2源码[toc]1 前言2 参考文档3 下载源码3.1 方法13.2 方法23.3 方法3 4 ubuntu编译qt源码4.1 环境准备4.2 设置交换分区大小4.3 编译源码4.4 添加环境变量4.5 验证编译结果4.6 编译帮助文档&#xff08;qch&#xf…...

编程日记 2025/5/31 8:05:32

leetcodehot100刷题——排序算法总结

排序算法总结 冒泡排序介绍步骤&#xff08;以升序排序为例&#xff09;算法实现复杂度分析时间复杂度空间复杂度 是否为稳定排序&#xff1a;是稳定排序的定义 选择排序介绍步骤&#xff08;以升序排序为例&#xff09;算法实现复杂度分析时间复杂度空间复杂度 是否为稳定排序…...

编程日记 2025/5/29 13:07:13

多用途商务，电子产品发布，科技架构，智能手表交互等发布PPT模版20套一组分享

产品发布类PPT模版20套一组&#xff1a;产品发布PPT模版https://pan.quark.cn/s/25c8517b0be3 第一套PPT模版是一个总结用的PPT封面&#xff0c;背景浅灰色&#xff0c;有绿色叶片和花朵装饰&#xff0c;深绿色标题&#xff0c;多个适用场景和占位符。突出其清新自然的设计和商…...

编程日记 2025/5/26 17:55:44

2025年- H29-Lc137- 19.删除链表的倒数第N个节点（快慢指针）---java版

1.题目描述 2.思路 快慢指针都在虚拟头节点&#xff0c;然后让快指针先走n1步&#xff0c;接下来&#xff0c;快慢指针以前移动&#xff0c;直到快指针指向null&#xff0c;慢指针指向被删节点的前一个节点。 3.代码实现 方法一&#xff1a;不带测试用例 /*** Definition …...

编程日记 2025/5/24 13:50:00

新电脑软件配置二：安装python，git, pycharm

安装python 地址 https://www.python.org/downloads/ 不是很懂为什么这么多版本 安装windows64位的 这里我是凭自己感觉装的了 然后cmd输入命令没有生效&#xff0c;先重启下&#xff1f; 重启之后再次验证 环境是成功的 之前是输入的python -version 命令输入错误 安装pyc…...

编程日记 2025/5/29 13:14:38

医学影像开发的开源生态与技术实践：从DCMTK到DICOMweb的全面探索

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C++, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C++、C#等开发语言，熟悉Java常用开发技术，能熟练应用常用数据库SQL server,Oracle,mysql,postgresql等进行开发应用…...

编程日记 2025/5/25 9:13:55

【HarmonyOS 5开发入门】DevEco Studio安装配置完全指南

⭐本期内容&#xff1a;【HarmonyOS4&#xff0b;NEXT】Button组件核心特性 &#x1f3c6;系列专栏&#xff1a;鸿蒙HarmonyOS&#xff1a;探索未来智能生态新纪元 文章目录 前言下载开发工具安装开发工具配置开发环境新建项目项目结构概述运行项目Preview预览模拟器运行 报错处…...

编程日记 2025/5/28 0:19:08

出现 Uncaught ReferenceError: process is not defined 错误

在浏览器环境中&#xff0c;process 对象是 Node.js 环境特有的&#xff0c;因此当你在浏览器中运行代码时&#xff0c;会出现 Uncaught ReferenceError: process is not defined 错误。这个错误是因为代码里使用了 process.env.BASE_URL&#xff0c;而浏览器环境下并没有 proc…...

编程日记 2025/5/27 4:41:06

如何实现RTSP和RTMP低至100-200ms的延迟：直播SDK的技术突破

在实时音视频传输中&#xff0c;低延迟是直播应用的核心技术要求之一。无论是在线教育、远程医疗&#xff0c;还是实时互动直播&#xff0c;延迟过大会影响用户体验&#xff0c;甚至导致应用无法正常使用。大牛直播SDK&#xff08;SmartMediaKit&#xff09;在RTSP和RTMP播放器…...

编程日记 2025/5/29 13:21:32

linux-----------------库制作与原理(下)

1.ELF文件 要理解编译链链接的细节&#xff0c;我们不得不了解⼀下ELF⽂件。其实有以下四种⽂件其实都是ELF⽂件&#xff1a; • 可重定位⽂件&#xff08;Relocatable File &#xff09; &#xff1a;即 xxx.o ⽂件。包含适合于与其他⽬标⽂件链接来创 建可执⾏⽂件或者共享…...

编程日记 2025/5/29 13:23:14

一种开源的高斯泼溅实现库——gsplat: An Open-Source Library for Gaussian Splatting

一种开源的高斯泼溅实现库——gsplat: An Open-Source Library for Gaussian Splatting 文章目录 一种开源的高斯泼溅实现库——gsplat: An Open-Source Library for Gaussian Splatting摘要Abstract1. 基本思想1.1 设计1.2 特点 2. Nerfstudio&Splatfacto2.1 Nerfstudio2.…...

编程日记 2025/5/24 13:50:15

Embedding 模型详解：架构、训练与 LLM 的区别

1. 什么是 Embedding 模型&#xff1f; Embedding 模型的核心使命是将离散的、高维的文本数据&#xff08;例如单个词语、短语、句子、段落乃至整篇文档&#xff09;转化为稠密的 (dense)、低维的 (low-dimensional)、连续的 (continuous) 向量表示。这些向量被称作“嵌入 (Em…...

编程日记 2025/6/1 14:08:02

网络的知识的一些概念

1.什么是局域网&#xff0c;什么是广域网 局域网&#xff08;Local area network&#xff09;也可以称为本地网&#xff0c;内网&#xff0c;局域网有这几个发展经历&#xff1a; 最开始电脑与电之间是直接用网线连接的 再后来有了集线器&#xff08;&#xff09; 再后来出…...

编程日记 2025/5/26 10:50:17

NAT（网络地址转换）逻辑图解+实验详解

原理 NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09; 是一种网络技术&#xff0c;用于在IP数据包通过路由器或防火墙时&#xff0c;修改其源IP地址或目标IP地址&#xff0c;以实现不同网络之间的通信。 基础概念 本来NAT是来解决 IPv4 地…...

编程日记 2025/5/29 16:10:23

深入解析Spring Boot与Kafka集成：构建高性能消息驱动应用

深入解析Spring Boot与Kafka集成&#xff1a;构建高性能消息驱动应用 引言 在现代分布式系统中&#xff0c;消息队列是实现异步通信和解耦的重要组件。Apache Kafka作为一种高性能、分布式的消息系统&#xff0c;被广泛应用于大数据和实时数据处理场景。本文将详细介绍如何在…...

编程日记 2025/5/31 8:35:25

Linux的内存泄漏问题及排查方法

内存泄漏是指在计算机程序中&#xff0c;已不再被使用的内存未被正确释放&#xff0c;导致内存占用随时间累积&#xff0c;进而引发系统内存不足、性能下降甚至崩溃的问题。在Linux系统中&#xff0c;开发者和运维人员可通过以下方法排查和解决内存泄漏问题&#xff1a; 1. 使…...

编程日记 2025/5/29 11:29:50

Java基础知识总结（超详细整理）

一&#xff1a;概述 1.1Java类及类的成员 属性、方法、构造器、代码块、内部类 &#xff08;1&#xff09;数组 java虚拟机内存划分 各区域作用 内存解析 基本使用 两个变量指向一个一维数组 没有new就不会在堆里新开辟空间 &#xff08;2&#xff09;对象数组 &#xff08;3&a…...

编程日记 2025/5/24 5:36:48

Qt Widgets模块功能详细说明，基本控件：QPushButton（二）

一、基本控件&#xff08;Widgets&#xff09; Qt 提供了丰富的基本控件&#xff0c;如按钮、标签、文本框、复选框、单选按钮、列表框、组合框、菜单、工具栏等。 1、QPushButton 1.1、概述 (用途、继承关系) QPushButton 是 Qt 框架中用于创建按钮的控件&#xff0c;它的主…...

编程日记 2025/5/26 14:41:11

【MySQL成神之路】MySQL常见命令汇总

目录 MySQL常用命令总结 1. 数据库操作 2. 表操作 3. 数据操作&#xff08;DML&#xff09; 4. 索引与优化 5. 用户与权限管理 6. 备份与恢复 7. 事务控制 8. 常用函数 9. 系统状态与日志 总结 MySQL常用命令总结 MySQL作为最流行的关系型数据库之一&#xff0c;提供…...

编程日记 2025/5/27 7:17:29

UnLua源码分析（一）初始化流程

UnLua源码分析&#xff08;一&#xff09;初始化流程 接入插件启动注册设置默认参数集注册回调SetActivePostLoadMapWithWorldULuaEnvLocator启动Lua虚拟机初始化UE相关的Lua Lib创建与Lua交互的数据结构注册静态导出的类&#xff0c;函数&#xff0c;枚举Lua层初始化 UUnLuaMa…...

编程日记 2025/5/25 13:24:07

非线性1 修改

第一章为读者介绍了非线性动力学与混沌理论的基本概念、发展历史以及应用领域。 1.1 动力学简史&#xff1a; 从牛顿力学开始&#xff0c;介绍动力学作为物理学分支的发展历程。重点介绍了庞加莱对混沌现象的早期探索&#xff0c;以及20世纪60年代洛伦兹方程的发现&#xff0…...

编程日记 2025/5/27 15:26:51

系统性能不达标，如何提升用户体验？

当系统性能不达标时&#xff0c;要想有效提升用户体验&#xff0c;必须从性能优化、前后端协同、用户感知改善、监控预警机制四个关键维度切入。其中&#xff0c;性能优化是最直接有效的策略&#xff0c;它通过代码优化、资源压缩、缓存机制、CDN加速等手段&#xff0c;显著提升…...

编程日记 2025/5/26 9:16:57

【Linux】进程的基本概念

目录 概念描述进程-PCB如何查看进程通过系统目录进行查看通过ps指令进行查看 通过系统调用获取进程的PID和PPID(进程标⽰符)通过系统调用创建子进程通过一段代码来介绍fork为什么要有子进程&#xff1f;fork为什么给子进程返回0&#xff0c;给父进程返回子进程的PIDfork函数到底…...

编程日记 2025/5/19 5:47:43

mongodb管理工具的使用

环境&#xff1a; 远程服务器的操作系统&#xff1a;centOS stream 9; mongoDB version:8.0; 本地电脑 navicat premium 17.2 ; 宝塔上安装了mongoDB 目的&#xff1a;通过本地的navicat链接mongoDB,如何打通链接&#xff0c;分2步&#xff1a; 第一步&#xff1a;宝塔-&…...

编程日记 2025/5/31 10:42:59

面试中的线程题

原文链接&#xff1a;线程题大全 Java 并发库同步辅助类 CountDownLatch 工作机制&#xff1a;初始化一个计数器&#xff0c;此计数器的值表示需要等待的事件数量。 提供了两个主要方法&#xff1a; await()&#xff1a;当一个线程调用此方法时&#xff0c;它将阻塞&#…...

编程日记 2025/5/26 7:16:30

计算机系统的层次结构

计算机系统的层次结构 一, 计算机系统的层次结构的定义 计算机的一个赢软件组成的综合体. 因为面对的应用范围越来越广, 所以必须有复杂的系统软件和硬件的支持. 软/硬件的设计者和使用者从不同的角度, 不同的语言来对待同一个计算机系统, 因此他们看到的计算机系统的属性对计…...

编程日记 2025/5/28 13:24:39

[特殊字符] SSL/TLS 中的密钥协商流程笔记

✅ 背景说明&#xff1a; SSL/TLS 为了确保通信保密性&#xff0c;结合使用了&#xff1a; 非对称加密&#xff08;用于密钥交换&#xff09; 对称加密&#xff08;用于数据加密&#xff09; &#x1f501; 客户端主导密钥协商的完整流程如下&#xff1a; 1️⃣ 客户端发起…...

编程日记 2025/5/22 3:06:09