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

娃哈哈哈哈呀2025-05-21 7:09

一、问题描述

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

二、解决

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

javascript 复制代码

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

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

html 复制代码

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

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

javascript 复制代码

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

};