Element Plus 动态表单验证

<div v-for="(item, index) in formList" :key="index">
   <el-form :ref="(el) => { formRefs(el) }" :model="item">
　　　　<el-form-item>
　　　　　　<el-input v-model="item.name"></el-input>
　　　　</el-form-item>
　　　　<el-form-item>

　　<el-button @click="save(index)">保存</el-button>

　　　　</el-form-item>

　　</el=form>
　　
</div>

<script setup>
import { ref } from "vue";
let formRefArr = []
const formRefs = (el: any) => {
    formRefArr.push(el)
}
const formList = ref([])
const save = async (index) => {

}
</script>

在v-for中,ref注册时,如果使用箭头函数或者函数的方式,会在每次重新渲染时都注册一遍,而不是覆盖。

举例来说,如果formList长度为3,那么:

初次渲染时,会注册3个ref到formRefArr 重新渲染时,又会再注册3个ref,这时formRefArr长度变成6 以此类推,每重新渲染一次,都会注册n个ref到formRefArr

这样最终formRefArr的长度就会和渲染次数*formList长度成正比,和formList长度不同。

在每次动态添加formList 的时候都应该formRefArr = []