<template>
  <!-- 動態(tài)ref -->
  <div class="test_ref">
    <div v-for="item in 9" :key="item">
      <span>{{ item }}</span>

      <!-- 動態(tài)設置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) => {
  // 若輸入框此時還沒有渲染出來，如先隱藏再觸發(fā)顯示 需要使用nextTick進行聚焦
  inputRefMap.value[`Input_Ref_${item}`].input.focus();
};

/** 動態(tài)設置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>