elementUI中表格中表单的验证

.el-form-item{
    margin-bottom: 0;
}

.el-form-item.is-required {
    height: 70px;
    padding-top: 14px;
}
 
.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px solid #c0c0c0;
    border-radius: 6px;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    cursor: pointer;
    line-height: 90px;
    vertical-align: top;
  }

  .upload {
    position: relative;

    .el-upload-list__item-progress {
      position: absolute;
      left: 0;
      top: 0;
      .el-progress-circle{
        width: 80px!important;
        height: 80px!important;
      }
    }

    .upload-img-block {
      width: 80px;
      height: 80px;
      position: relative;

      .el-upload-list__item-thumbnail {
        width: 100%;
        height: 100%;
        border-radius: 0.3rem;
      }

      .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }

      .item-icon {
        i {
          font-size: 30px;
          color: #ffffff;
          cursor: pointer;
        }
      }

      &:hover {
        .el-upload-list__item-actions {
          opacity: 1;
        }
      }
    }
  }

<el-form
  ref="ruleForm"
  :model="ruleForm"
  :rules="rules"
  label-width="0px"
  class="demo-ruleForm"
>
  <el-table
    :data="ruleForm.userData"
    border
    style="width: 100%"
  >
    <el-table-column prop="name" label="业主名称" :render-header="addRequired">
      <template slot-scope="scope">
        <el-form-item :prop="`userData[${scope.$index}].name`" :rules="rules.name">
          <el-input placeholder="请填写姓名" v-model="scope.row.name"/>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column prop="avatar" label="脸部照片" width="100" align="center">
      <template slot-scope="scope">
        <el-form-item class="avatar">
          <div class="upload">
            <el-upload
              :action="imageUrl"
              :headers="myHeaders"
              :show-file-list="false"
              list-type="picture-card"
              :on-success="($event) => uploadAvatarSuccess($event, scope)"
              :on-remove="() => handleAvatarRemove(scope)"
              :before-upload="($event) => beforeImageUpload($event, scope)"
              :on-progress="($event) => uploadVideoProcess($event, scope)"
            >
              <div v-if="!scope.row.facePhotos && !scope.row.progressFlag">
                <i slot="default" class="el-icon-plus" />
              </div>
              <div
                v-else
                slot="scope"
                slot-scope="scope"
                class="upload-img-block"
                @click.stop=" () => { return; }"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="`/${bucket}/${scope.row.facePhotos}`"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                <span
                  class="item-icon"
                  @click="
                    handlePictureCardPreview(scope.row.facePhotos)
                  "
                >
                  <i class="el-icon-zoom-in"/>
                </span>
                <span
                  v-if="!disabled"
                  class="item-icon"
                  @click="handleAvatarRemove(scope.row)"
                >
                  <i class="el-icon-delete"/>
                </span>
              </span>
              </div>
              <el-progress
                v-if="scope.row.progressFlag"
                class="el-upload-list__item-progress"
                type="circle"
                :percentage="scope.row.loadProgress"
              />
            </el-upload>
          </div>
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
  <el-form-item class="tc mt20">
    <el-button type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
  </el-form-item>
</el-form>

<!-- 预览图片弹窗 -->
<el-dialog :visible.sync="detailDialogVisible">
  <img width="100%" :src="`/${bucket}/${dialogImageUrl}`" alt="预览图片" />
</el-dialog>

 data() {
    return {
      imageUrl: 'api/Minio/UploadFile?folderPath=estate/user_room/',
      myHeaders: { Authorization: getToken() },
      ruleForm: {
        type: 1,
        userData: [
          {
            name: '王小虎',
            phone: '18888888888',
            progressFlag: false
          }, {
            name: '王小虎',
            phone: '2222222',
            progressFlag: false
          }
        ]
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入用户姓名',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur', ' change']
          },
          { validator: validateMobile, trigger: 'blur' }
        ],
      },
      disabled: false,
      detailDialogVisible: false,
      dialogImageUrl: []
    }
  },

    // table表头*
    addRequired(h, { column }) {
      return [
        h('span', { style: 'color:#FF2727; margin-right: 5px;' }, '*'),
        h('span', column.label)
      ]
    },
    // 预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file
      this.detailDialogVisible = true
    },
    // 进度条
    uploadVideoProcess(event, scope) {
      this.$set(this.ruleForm.userData[scope.$index], 'progressFlag', true)
      this.$set(this.ruleForm.userData[scope.$index], 'loadProgress', parseInt(event.percent))
      if (scope.row.loadProgress === 100) {
        setTimeout(() => {
          this.$set(this.ruleForm.userData[scope.$index], 'loadProgress', 100)
          this.$set(this.ruleForm.userData[scope.$index], 'progressFlag', false)
        }, 500) // 一秒后关闭进度条
      } else {
        return
      }
    },
    // 上传人脸
    uploadAvatarSuccess(result, scope) {
      this.$set(this.ruleForm.userData[scope.$index], 'facePhotos', result.data.pathName)
    },
    // 删除人脸
    handleAvatarRemove(scope) {
      DeleteImg({
        fileName: scope.facePhotos
      }).then((res) => {
        if (res.success) {
          this.$set(scope, 'facePhotos', '')
          this.$message.success('脸部照片已删除')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 监听人脸的上传文件之前
    beforeImageUpload(file) {
      const isImage = file.type.includes('image/')

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
      }
      return isImage
    },
    add() {
      this.ruleForm.userData.push({
        progressFlag: false
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.ruleForm)
        } else {
          return false
        }
      })
    }