动态循环生成的el-form表单增加表单验证

最近搞一个动态循环的el-form，首先动态生成ref值发现竟然放在数组里面，直接循环里面的[VueComponent]，最重要的就是别忘了动态绑定model，不然验证不起作用。

<div v-for="(item, index) in formList" :key="index">
            <el-form
              :model="item"
              :inline="true"
              ref="form"
              :rules="rules"
              label-width="130px"
            >
              <el-form-item label="名称" prop="name">
                <el-input
                  style="width: 230px"
                  v-model="item.name"
                  placeholder="请输入名称"
                ></el-input>
              </el-form-item>
                //......
            </el-form>
          </div>

computer里面放入表单验证的规则

computed: {
    rules() {
      return {
        name: [
          {
            required: true,
            message: " 请输入名称",
            trigger: "blur",
          },
        ],
}}

最重要的一步，表单验证，因为validate()是一个异步的promise()

let valid = true;
      if (this.formList.length > 0) {
        valid = await Promise.all(
          this.$refs.form.map(async (item) => {
            return new Promise((resolve) => {
              item.validate((valid) => {
                resolve(valid);
              });
            });
          })
        );

        valid = valid.every((value) => value === true);
      }
      console.log(valid);