Vue3 动态设置 ref

说明

在一些场景，ref设置需要根据动态数据来决定，如表单中的正则验证，就需要给每一个from设置一个ref，进而进行正则效验。

 Demo

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

      <!-- 动态设置ref -->
     <el-form
        :ref="(el:refItem) => handleSetFromMap(el, item)"
        label-width="100px"
        :rules="rules"
      >
      <el-input prop="input" v-model="inputVal" placeholder="Please input"/>
     </el-form>

    </div>
    <el-button type="primary" @click="handleEdit()">提交</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
const rules = reactive({
  input: [{ required: true, message: '请输入内容', trigger: ['change', 'blur'] }]
}]
const inputVal = ref();
const fromRefMap = ref({});

/** 提交 */
const handleEdit = async(item: number) => {
  // 进行表单验证
  await fromRefMap.value[`From_Ref_${item}`].validate();
};

/** 动态设置From Ref */
const handleSetFromMap = (el: refItem, item: number) => {
  if (el) {
    fromRefMap.value[`From_Ref_${item}`] = el;
  }
};
</script>

<style lang="scss" scoped></style>