vue 对表单中的上传upload组件非空校验(elementui)
注意prop要绑定<el-form ref="form" :model="form" :rules="rules" label-width="150px"><el-form-item label="文件:"style="width: 300px" prop="fileList"><el-uploadv-model="form.fileList"align="left"
·
注意prop要绑定
<el-form ref="form" :model="form" :rules="rules" label-width="150px">
<el-form-item label="文件:" style="width: 300px" prop="fileList">
<el-upload
v-model="form.fileList"
align="left"
drag
class="upload-demo"
:auto-upload="false"
:data="fileData"
:action="upload()"
:on-change="handleChange"
:on-remove="handleRemove"
multiple
:limit="1"
:file-list="fileList">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">保存</el-button>
</el-form-item>
</el-form>
rules: {
fileList: [
{ required: true, message: '请上传文件', trigger: 'change' }
]
}
方法
// 选择文件后给表单验证的prop字段赋值, 并且清除该字段的校验
handleChange(file, fileList) {
this.form.fileList = fileList;
// 防止用户打开了文件选择框之后不选择文件而出现效验失败
if(this.form.fileList){
this.$refs.form.clearValidate('fileList');
}
},
// 删除文件后重新校验该字段
handleRemove(file, fileList) {
this.form.fileList = fileList;
this.$refs.form.validateField('fileList');
},
submitForm(formName){
this.loading = true;
this.$refs[formName].validate((valid) => {
if (valid) {
// 校验成功后执行
} else {
// 失败后执行
console.log('error submit!!');
return false;
}
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)