[element-ui]el-form自定义校验-图片上传验证(手动触发部分验证方法)

背景:

在做导入文件功能的时候,需要校验表单,如图所示

店铺字段绑定在表单数据对象上,在点击确定的时候正常按照表单验证规则去校验,就不再赘述。

文件上传是个异步过程,属性值改变后不会去触发验证规则,这里需要手动去触发验证。有两种方法,记录一下。

方法1:

(方法1写法比较笨,是因为我之前做表单部分验证没生效才这么写的,可以直接看方法2-表单部分验证写法)

注意:fileList是单独定义的数组,不是绑定在表单对象中。

定义一个字符串errorMsg,红色样式,模拟表单验证的结果。

<el-form-item label="上传文件">
    <div class="upload-box">
        <el-upload action="" :auto-upload="false"
            :file-list="fileList"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :on-change="handleUploadChange"
            accept=".csv,.xlsx">
            <el-button slot="trigger" type="primary">点击选择</el-button>
            <el-button @click="handleDownLoad" type="te