Element Plus 动态表单验证

发布时间 2023-11-07 18:09:54作者: 不要香菜谢谢~
<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) => {
  await formRefArr[index].validate((valid: boolean) => {
    if (!valid) {}
}
</script>

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

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

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

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

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