当前位置：首页 > news >正文

校验v-for中的form表单

news 来源：原创 2025/5/3 17:12:49

场景：
整体外层一个form，内层多个form组成。
点击新增会在增加一个from表单，点击删除即删除一个form。

视图层：

<div      
    v-for="(item, index) in actionData"      
    :key="item"      class="form-wrapper"  
>    
    <el-form        
        ref="actionForm"        
        :model="item"        
        label-width="68px"        
        class="item-form"    
    >    
    </el-form>
</div>

数据层

data：

actionData: [{ id: 'no1', name: '前端'}];

methods：

/* add */
const add = () => {  actionData.push({});};
/* del */
const del = (index) => {  actionData.splice(index, 1);};

/* -----校验所有form------ */

const validate = (refs) => {   
    const promises = refs.map((form, index) => form.validate());   
    return Promise.all(promises);
};

/* submit */
async function submit = () => {
    try {
        rule = await validate(this.$refs.actionForm);   
    } catch (e) {     
        rule = e;   
    };   
    if (!rule) {     
        return false;   
    } else {     
        /* todo*/   
   }
};

总结：

1、for 循环体或者map里是不支持await。

2、避免层层嵌套的回调校验。

如果验证失败自动滚定位到校验失败的位置：

const restpotion = () => {  
    let anchor = document.querySelectorAll('.el-form-item__error')[0]; 
        anchor.scrollIntoView({
            block: 'end',                
            behavior: 'smooth',  
    });
};

参考：https://juejin.cn/post/7049342392515690526