Vue2.x + Elementui 动态表单循环校验

场景

最近项目有个页面涉及到批量创建工作量，内容可动态添加，且包含一些必填项。看下图：

提交时，能实现对动态内容必填项进行拦截校验，如下图：

思路分析

写页面时，下半部分的动态内容，通过循环 list 集合，来创建多个表单，并标识出对应的动态 ref 属性。 提交时，再次循环 list 集合，通过获取对应的 ref 标识来获取表单，并创建对应的 promise 校验对象，最后进行全部校验。

代码实现

<div v-for="(workItem, index) in form.list" :key="index" class="work-item">
    <el-form
      :ref="'form' + index"
      :model="workItem"
      inline
      label-width="110px"
      label-position="left"
      class="extend-form"
    >
    <-- 其他表单内容 -->
    </el-form>
</div>

export default {
  methods: {
    submit() {
    	const validArr = []
        this.form.list.forEach((item, index) => {
        validArr.push(new Promise((resolve, reject) => {
          this.$refs['form' + index][0].validate(valid => {
            if (valid) resolve()
          })
        }))
        
        Promise.all(validArr).then(() => {
          // 全部校验通过
        })
      })
    }
  }
}