el-form 校验单个字段

单个校验 核心为 validateField() 而非validate()

    <el-form
      :inline="false"
      :rules="rules"
      :model="formInline"
      ref="formInline"
      class="demo-form-inline"
      label-width="185px"
    >
      <el-form-item label="协管协议：" prop="escrowFiles" inline-message="true">
        // 此处↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
        <FileUploadIndexS :types="['pdf']" @escrowFilesEmit="(val) => {escrowFilesEmit(val,'escrowFiles')}" />
      </el-form-item>
      <el-form-item  label="协管协议照片：" prop="escrowImgs">
        <FileUploadIndexS :types="['png', 'jpg', 'jpeg']" />
      </el-form-item>
      <el-form-item label="资产移交手续：" prop="assetFiles">
        <FileUploadIndexS :types="['pdf']" @assetImgsEmit="assetImgsEmit"  />
      </el-form-item>
      <el-form-item label="资产移交手续照片：" prop="assetImgs">
        <FileUploadIndexS :types="['png', 'jpg', 'jpeg']" />
      </el-form-item>
    </el-form>

    /* 协议文件 */
    escrowFilesEmit({ url,name },prop){
    this.formInline.escrowFiles = [...this.formInline.escrowFiles,{filesUr:url,filesName:name}]
    this.$refs.formInline.validateField(prop,val => !val ? true : false);
    },

 完整代码

父组件 

<!--
 * @Author       : qixiao
 * @Date         : 2023-06-28 22:03:07
 * @LastEditors  : qixiao
 * @LastEditTime : 2023-07-03 12:07:51
 * @FilePath     : \第三方\Sanfang-project\src\views\thirdunit\project\protect.vue
 * @Description  : 
 * 
-->
<template>
  <div class="pages">
    <!-- 1.项目详情 -->
    <p class="detail_tit">项目详情</p>
    <!-- 1.1 详细描述 -->
    <el-descriptions
      title=""
      :column="4"
      border
      class="margin-top centers"
      direction="vertical"
    >
      <el-descriptions-item label="管护主体">{{
        detailList.supervisorName
      }}</el-descriptions-item>
      <el-descriptions-item label="负责人">{{
        detailList.contacts
      }}</el-descriptions-item>
      <el-descriptions-item label="项目地址">{{
        detailList.county + detailList.town + detailList.village
      }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{
        detailList.contactsPhone
      }}</el-descriptions-item>
    </el-descriptions>
    <!-- 2.合同及供应商信息 -->
    <p class="detail_tit bottoms">合同及供应商信息</p>
    <el-form
      :inline="false"
      :rules="rules"
      :model="formInline"
      ref="formInline"
      class="demo-form-inline"
      label-width="185px"
    >
      <el-form-item label="协管协议：" prop="escrowFiles" inline-message="true">
        <FileUploadIndexS :types="['pdf']" @escrowFilesEmit="(val) => {escrowFilesEmit(val,'escrowFiles')}" />
      </el-form-item>
      <el-form-item  label="协管协议照片：" prop="escrowImgs">
        <FileUploadIndexS :types="['png', 'jpg', 'jpeg']" />
      </el-form-item>
      <el-form-item label="资产移交手续：" prop="assetFiles">
        <FileUploadIndexS :types="['pdf']" @assetImgsEmit="assetImgsEmit"  />
      </el-form-item>
      <el-form-item label="资产移交手续照片：" prop="assetImgs">
        <FileUploadIndexS :types="['png', 'jpg', 'jpeg']" />
      </el-form-item>
    </el-form>
    <!-- 3.保存 -->
    <div class="fotter">
      <el-button type="primary" @click="Ctrl_S('formInline')">保 存</el-button>
      <el-button type="info">取 消</el-button>
    </div>
  </div>
</template>

<script>
import FileUploadIndexS from "@/views/components/construction/FileUploadIndexS.vue";
export default {
  components: { FileUploadIndexS },
  props: [],
  data() {
    /* 托管协议文件 */
    var escrowFilesRules = (rule, value, callback, source) => {
      if (this.formInline.escrowFiles.length == 0) {
        callback(new Error("托管协议文件不能为空"));
      } else {
        callback();
      }
    };
    /* 协管协议照片 */
    var escrowImgsRules = (rule, value, callback, source) => {
      if (this.formInline.escrowImgs.length == 0) {
        callback(new Error("协管协议照片为空"));
      } else {
        callback();
      }
    };
    /* 资产移交手续 */
    var assetFilesRules = (rule, value, callback, source) => {
      if (this.formInline.assetFiles.length == 0) {
        callback(new Error("资产移交手续不能为空"));
      } else {
        callback();
      }
    };
    /* 资产移交手续照片 */
    var assetImgsRules = (rule, value, callback, source) => {
      if (this.formInline.assetImgs.length == 0) {
        callback(new Error("资产移交手续照片不能为空"));
      } else {
        callback();
      }
    };
    return {
      /* 描述列表 */
      detailList: {},
      /* route传参 */
      routeDate: this.$route.query.id,
      /* form */
      formInline: {
        escrowFiles: [],
        escrowImgs: [],
        assetFiles: [],
        assetImgs: [],
      },
      rules: {
        escrowFiles: [
          {
            required: true,
            message: "协管协议不能为空",
            trigger: "change",
            validator: escrowFilesRules,
          },
        ],
        escrowImgs: [
          {
            required: true,
            message: "协管协议照片不能为空",
            trigger: "change",
            validator: escrowImgsRules,
          },
        ],
        assetFiles: [
          {
            required: true,
            message: "资产移交手续",
            trigger: "change",
            validator: assetFilesRules,
          },
        ],
        assetImgs: [
          {
            required: true,
            message: "资产移交手续照片",
            trigger: "change",
            validator: assetImgsRules,
          },
        ],
      },
    };
  },
  mounted() {},
  created() {},
  methods: {
    /* 保存 */
    Ctrl_S(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },

    /* 协议文件 */
    escrowFilesEmit({ url,name },prop){
    this.formInline.escrowFiles = [...this.formInline.escrowFiles,{filesUr:url,filesName:name}]
    this.$refs.formInline.validateField(prop,val => !val ? true : false);
    },

    /* 手续文件 */
    assetImgsEmit({url,name},prop){
        this.formInline.assetFiles = [...this.formInline.assetFiles,{filesUr:url,filesName:name}]
        this.$refs.formInline.validateField(prop,val => !val ? true : false);
    },

    /* 手续文件 */
    assetImgsEmit({url,name}){
        this.formInline.assetFiles = [...this.formInline.assetFiles,{filesUr:url,filesName:name}]
        this.$refs.formInline.validate();
    },
    /* 手续文件 */
    assetImgsEmit({url,name}){
        this.formInline.assetFiles = [...this.formInline.assetFiles,{filesUr:url,filesName:name}]
        this.$refs.formInline.validate();
    },
  },
};
</script>

<style lang='scss' scoped>
.pages {
  ::v-deep
    .centers
    .el-descriptions__body
    .el-descriptions__table
    .el-descriptions-item__label {
    text-align: center !important;
  }
  ::v-deep
    .centers
    .el-descriptions__body
    .el-descriptions__table
    .el-descriptions-item__content {
    text-align: center !important;
  }
  .bottoms {
    margin-top: 20px;
  }
  .fotter {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    text-align: center;
  }
  ::v-deep .el-form-item__error{
    /* form校验样式 */
    // left:185px;
  }
}
</style>

 

子组件(文件、图片上传组件)
src\views\components\construction\FileUploadIndexS.vue

<!--
 * @Author       : qixiao
 * @Date         : 2023-06-29 09:50:43
 * @LastEditors: liushumin
 * @LastEditTime: 2023-06-29 22:17:04
 * @FilePath     : \第三方\Sanfang-project\src\views\components\construction\FileUploadIndexS.vue
 * @Description  : 
 * 
-->
<template>
  <div class="upload-file">
    <el-upload
      :action="uploadFileUrl"
      :limit="limit"
      :list-type="types.includes('pdf') ? 'none' : 'picture-card'"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :http-request="myUpload"
      :before-upload="handleBeforeUpload"
    >
      <i v-if="!types.includes('pdf') ? (!text ? true :false) : false" class="el-icon-plus"></i>
      <el-button
        v-if="
          types.includes('pdf')
            ? limit == fileList.length
              ? false
              : true
            : false
        "
        >点击上传</el-button
      >
      <span v-if="text ? (limit == fileList.length ? false : true) : false"
        >上传</span
      >
    </el-upload>
    <el-dialog
      title="图片预览"
      :append-to-body="true"
      :visible.sync="dialogVisible"
    >
      <img
        style="max-height: 70vh; max-width: 100%"
        :src="dialogImageUrl"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["limit", "types", "text"],
  data() {
    return {
      dialogImageUrl: "", //预览
      dialogVisible: false, //预览
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/nt/common/file/upload", // 上传文件服务器地址
      fileList: [],

      // ["png", "jpg", "jpeg","pdf"]
      fileType: this.types, //文件格式
      fileSize: 60, //文件大小
    };
  },
  watch:{
    "fileList"(J,K){
      if(J.length == this.limit) {
        let dom = document.querySelector(".el-upload");
        dom.style.setProperty("display","block")
      }
    }
  },
  mounted() {},
  created() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      let arr = [];
      this.fileList = [];
      fileList.map((item) => arr.push(item.url));
      fileList.map((item) => this.fileList.push({ url: item.url }));
      console.log(arr);
      this.$emit("remove", arr);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      if (!file.url.includes(".pdf")) {
        this.dialogVisible = true;
      } else {
        window.open(file.url);
      }
    },
    myUpload(content) {
      console.log(content);
      let param = new FormData(); // 创建form对象
      param.append("uploadfile", content.file, content.file.name);
      param.append("source", "gb"); // 高标
      const loading = this.$loading({
        lock: true,
        text: "上传中，请稍等",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      console.log(param);
      this.axios({
        url: content.action,
        method: "post",
        headers: {
          Authorization: window.localStorage.getItem("TokenKey") || "",
        },
        data: param,
      }).then((response) => {
        if (response.data.code == 200) {
          console.log(response.data.data);
          loading.close();
          content.onSuccess(response.data.data);
          this.$nextTick(() => {
            this.fileList.push({
              url: response.data.data.result.url,
              name: response.data.data.result.originalFilename,
            });
          });
          console.log(response.data.data.result.url);
          console.log(this.limit, this.fileList.length);
          if (response.data.data.result.url.includes(".pdf")) {
            this.$emit("pdfEmit", {
              url: response.data.data.result.url,
              name: response.data.data.result.originalFilename,
            });
            /* 协管协议： */
            this.$emit("escrowFilesEmit", {
              url: response.data.data.result.url,
              name: response.data.data.result.originalFilename,
            });
            /* 资产移交手续： */
            this.$emit("assetImgsEmit", {
              url: response.data.data.result.url,
              name: response.data.data.result.originalFilename,
            });
          } else {
            this.$emit("imgUrl", response.data.data.result.url);
            /* 协管协议照片 */
            this.$emit("escrowImgsEmit", response.data.data.result.url);
            /* 资产移交手续照片 */
            this.$emit("assetImgsEmit", response.data.data.result.url);
          }
        }
        console.log(this.fileList);
      });
    },
    // 上传前校检格式和大小
    handleBeforeUpload(multipartFile) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = multipartFile.name.split(".");
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$modal.msgError(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = multipartFile.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传文件，请稍候...");
      this.number++;
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 20px 20px 30px 20px !important;
  text-align: center;
}

::v-deep .el-upload-list__item.is-success:focus:not(:hover) {
  display: none !important;
}
</style>