山东省住房与建设厅网站首页谷歌官网下载
场景：
整体外层一个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