vue3.x + elementui-plus实现v-for动态循环生成ref后进行表单验证

该文章演示了如何在Vue3.x项目中结合ElementUI-Plus，使用v-for动态循环生成表单，并进行表单验证。每个表单项通过ref进行管理，验证通过后执行提交操作。示例包含一个简单的名称输入框，可扩展至更多表单字段。

vue3.x + elementui-plus实现v-for动态循环生成ref后进行表单验证

本例子是根据vue3.x 和elementui的多form表单进行表单验证，验证通过后再进行提交操作，我这里只给出了最简单的表单，只有一个名称输入框，可根据自己需求进行扩展。

效果图：
在这里插入图片描述

在demo.vue的template里编写循环生成的from表单

<template>
 <el-form :model="item"  v-for="(item,index) in list" :ref="setItemRef"   :rules="rules" :label-width="'90px'">
     <el-form-item label="名称" prop="name">
          <el-input v-model="item.name"  />
      </el-form-item>
  </el-form>
</template>

采用vue3的setup语法糖

<script  setup>
    import {ref,reactive} from  'vue'
    import {ElMessage} from 'element-plus'
	//编写form表单验证规则
	 const rules = reactive({
        name: [
            {
                required: true,
                message: '名称不能为空',
                trigger: 'blur'
            },
        ]
    })
    //form内容
     const list = reactive([
        { name: ''},
        { name: ''},
    ])
    
     //定义ref数组
	 const refList = ref([]);
	 
 	 //赋值ref
    const setItemRef = el => { 
        if (el) {
            refList.value.push(el);
        }
    }
 	//获取ref并执行接下来操作
    const getRefData = ()=>{
        let flagList = [];
        for(let i =0; i < refList.value.length; i++){
            console.log(refList.value[i]); // refList.value[i].xxx   执行todo
            refList.value[i].validate((valid) => {
                console.log(valid);
                if (valid) {
                    console.log("验证成功");
                }else{
                    console.log("验证失败");
                }
                flagList.push(valid)
                console.log(flagList);
                if(i == refList.value.length -1){
                    submitForm();
                }
            })

        }

        function submitForm() {
        	//如果表单验证都通过
            let flag = flagList.every(item=> item == true);
            if(flag){
                console.log("成功提交操作");
            }else{
                console.log("失败提示");
            }
        }
    }
</script>