Vue3 动态设置 ref

最新推荐文章于 2025-05-18 19:02:12 发布

-小龙人

最新推荐文章于 2025-05-18 19:02:12 发布

阅读量4.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端 # vue 文章标签： vue 动态ref

本文链接：https://blog.csdn.net/qq_36330228/article/details/134466234

vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

本文介绍了如何在Vue项目中，利用动态ref属性根据场景需求为表格中的input框设置ref，以便在点击编辑按钮时能自动聚焦到相应的输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

在一些场景，ref设置是未知的需要根据动态数据来决定，如表格中的input框需要我们主动聚焦，就需要给每一个input设置一个ref，进而进行聚焦操作。

Demo

点击下面截图中的编辑按钮，自动聚焦到相应的输入框中。
在这里插入图片描述

<template>
  <!-- 动态ref -->
  <div class="test_ref">
    <div v-for="item in 9" :key="item">
      <span>{{ item }}</span>

      <!-- 动态设置ref -->
      <el-input
        v-model="inputVal"
        placeholder="Please input"
        :ref="(el:refItem) => handleSetInputMap(el, item)"
      />

      <el-button type="primary" :icon="Edit" @click="handleEdit(item)" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { ComponentPublicInstance } from "vue";
type refItem = Element | ComponentPublicInstance | null;
const inputVal = ref();
const inputRefMap = ref({});

/** 编辑 */
const handleEdit = (item: number) => {
  // 若输入框此时还没有渲染出来，如先隐藏再触发显示 需要使用nextTick进行聚焦
  inputRefMap.value[`Input_Ref_${item}`].input.focus();
};

/** 动态设置Input Ref */
const handleSetInputMap = (el: refItem, item: number) => {
  if (el) {
    inputRefMap.value[`Input_Ref_${item}`] = el;
  }
};
</script>

<style lang="scss" scoped>
.test_ref {
  padding: 50px;
  > div {
    width: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
  }
}
</style>