應用效果：從第一行輸入1，按回車，聚焦到第二行輸入2，按回車，聚焦到第三行……

一、通過元素 id，聚焦到下一行的輸入框

關鍵技術點：

1、動態設置元素 id 屬性為：:id="`input-apply-amount-${(option as IReagentOption).id}`"

2、設置回車監聽：@keyup.enter.native="onEnterPressDown((option as IReagentOption).id)"

                <el-input......:id="`input-apply-amount-${(option as IReagentOption).id}`"@keyup.enter.native="onEnterPressDown((option as IReagentOption).id)" />

3、通過 document.getElementById 獲取到指定元素

4、focus 和?select，聚焦、全選

// 通過元素 id，聚焦到下一行的輸入框
const focusNextRowByElementId = (objId: number) => {// 通過 objId 獲取當前行索引let currentRowIndex = selectedOptionIds.value.indexOf(objId);// 下一行的輸入框let nextInput: HTMLInputElement;if (currentRowIndex + 1 < selectedOptionIds.value.length) {// 下一行索引的 objIdlet nextRowObjId = selectedOptionIds.value[currentRowIndex + 1];nextInput = document.getElementById(`input-apply-amount-${nextRowObjId}`) as HTMLInputElement;} else {// 最后一行聚焦到申領用途輸入框nextInput = document.getElementById("transfer-right-footer-purpose-input") as HTMLInputElement;}nextInput?.focus();nextInput?.select();
};

二、通過元素 ref，聚焦到下一行的輸入框

關鍵技術點：

1、動態設置元素 ref 屬性為：:ref="`input-apply-amount-${(option as IReagentOption).id}`"

2、設置回車監聽：@keyup.enter.native="onEnterPressDown((option as IReagentOption).id)"

                <el-input......:ref="`input-apply-amount-${(option as IReagentOption).id}`"@keyup.enter.native="onEnterPressDown((option as IReagentOption).id)" />

3、通過?getCurrentInstance() 獲取當前組件實例，再通過?refs 獲取到元素列表

4、focus 和?select，聚焦、全選

<script setup lang="ts" name="ReagentApplyDialog">
......
import { getCurrentInstance } from "vue";// 當前組件實例，相當 vue2 的this
const thisInstance = getCurrentInstance();// 通過元素 ref，聚焦到下一行的輸入框
const focusNextRowByElementRef = (objId: number) => {if (!thisInstance) return;// 獲取輸入框實例 Recordlet refs = thisInstance.refs as Record<string, HTMLInputElement>;// 通過 objId 獲取當前行索引let currentRowIndex = selectedOptionIds.value.indexOf(objId);if (currentRowIndex + 1 < selectedOptionIds.value.length) {// 下一行索引的 objIdlet nextRowObjId = selectedOptionIds.value[currentRowIndex + 1];// 聚焦到下一行的輸入框refs[`input-apply-amount-${nextRowObjId}`].focus();refs[`input-apply-amount-${nextRowObjId}`].select();} else {// 最后一行聚焦到申領用途輸入框refs["transfer-right-footer-purpose-input"].focus();refs["transfer-right-footer-purpose-input"].select();}
};
......
</script>

實例完整代碼：

<script setup lang="ts" name="ReagentApplyDialog">
......
import { getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";// 當前組件實例，相當 vue2 的this
const thisInstance = getCurrentInstance();// 按回車，申領數量輸入框按回車
const onEnterPressDown = (objId: number) => {// 奇數if (objId % 2 === 1) {// 通過元素 id，聚焦到下一行的輸入框focusNextRowByElementId(objId);}// 偶數else {// 通過元素 ref，聚焦到下一行的輸入框focusNextRowByElementRef(objId);}
};// 通過元素 id，聚焦到下一行的輸入框
const focusNextRowByElementId = (objId: number) => {// 通過 objId 獲取當前行索引let currentRowIndex = selectedOptionIds.value.indexOf(objId);// 下一行的輸入框let nextInput: HTMLInputElement;if (currentRowIndex + 1 < selectedOptionIds.value.length) {// 下一行索引的 objIdlet nextRowObjId = selectedOptionIds.value[currentRowIndex + 1];nextInput = document.getElementById(`input-apply-amount-${nextRowObjId}`) as HTMLInputElement;} else {// 最后一行聚焦到申領用途輸入框nextInput = document.getElementById("transfer-right-footer-purpose-input") as HTMLInputElement;}nextInput?.focus();nextInput?.select();
};// 通過元素 ref，聚焦到下一行的輸入框
const focusNextRowByElementRef = (objId: number) => {if (!thisInstance) return;// 獲取輸入框實例 Recordlet refs = thisInstance.refs as Record<string, HTMLInputElement>;// 通過 objId 獲取當前行索引let currentRowIndex = selectedOptionIds.value.indexOf(objId);if (currentRowIndex + 1 < selectedOptionIds.value.length) {// 下一行索引的 objIdlet nextRowObjId = selectedOptionIds.value[currentRowIndex + 1];// 聚焦到下一行的輸入框refs[`input-apply-amount-${nextRowObjId}`].focus();refs[`input-apply-amount-${nextRowObjId}`].select();} else {// 最后一行聚焦到申領用途輸入框refs["transfer-right-footer-purpose-input"].focus();refs["transfer-right-footer-purpose-input"].select();}
};
......
</script><template>
......<el-transfer......><!-- 自定義列表數據項的內容 --><template #default="{ option }">......<el-inputv-if="selectedOptionIds.includes((option as IReagentOption).id)":ref="`input-apply-amount-${(option as IReagentOption).id}`":id="`input-apply-amount-${(option as IReagentOption).id}`"class="input-apply-amount"style="width: 85px; text-align: center"v-model="(option as IReagentOption).applyAmount"placeholder="輸入申領數量"size="small"clearable@input="(option as IReagentOption).applyAmount = Number(formatToNumber($event, 0))"@keyup.enter.native="onEnterPressDown((option as IReagentOption).id)" />......</template></el-transfer>
......
</template>