vue3.x + elementui-plus实现v-for动态循环生成ref后进行表单验证
本例子是根据vue3.x 和elementui的 多form表单进行表单验证，验证通过后再进行提交操作，我这里只给出了最简单的表单，只有一个名称输入框，可根据自己需求进行扩展。
往期文章：vue3获取动态循环生成的ref
效果图：
- 在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 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>