一、問題描述

先給大家簡單介紹一下問題背景。我正在開發的項目中，有一個表格組件，其中一列是分鏡描述，需要支持視頻上傳功能。用戶可以為每一行的分鏡描述上傳對應的視頻示例。然而，在實現過程中，出現了一個嚴重的問題：當表格有多行數據時，點擊某一行的本地上傳按鈕，選擇文件后，數據卻總是跑到最后一行。這顯然不符合預期，嚴重影響了用戶體驗和功能的正確性。

二、解決

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();}};

?