这种场景多在动态循环三个form表单的情况出现,以element UI为例:
简单来说就是用的ref的函数用法::ref="el => (formRefs[index] = el)"
<template><div><el-formv-for="(item, index) in formModels":key="index":ref="el => (formRefs[index] = el)":model="formModels[index]"label-width="80px"><el-form-item label="Name"><el-input v-model="formModels[index].name"></el-input></el-form-item><el-form-item label="Age"><el-input v-model="formModels[index].age" type="number"></el-input></el-form-item></el-form><button @click="logFormRefs">Log Form Refs</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';const formRefs = ref([]);
const formModels = ref([{ name: '', age: null },{ name: '', age: null },{ name: '', age: null }
]);const logFormRefs = () => {console.log(formRefs.value);
};onMounted(() => {//验证console.log('Mounted:', formRefs.value);
});
</script><style>
/* Add any necessary styles */
</style>