校验v-for中的form表单

场景： 整体外层一个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',   }); };

参考： juejin /post/7049342392515690526