[Vue.js] 前端小哥进 Element UI 的上传组件怎么写表单验证


问题

就算选择了文件,提交的时候还是表单验证不通过,我也是醉了。这个 upload 的组件的表单验证具体要怎么写呢,请各位指教。

rules 也对 prop 也都对,upload 需要什么特殊设置吗?

https://cdn.learnku.com/uploads/images/202109/28/86273/xIrsfTAQlR.jpg!large

// html <el-form :ref="formImportName" :model="formImportData" :rules="importRules" > <el-form-item label="导入文件" :label-width="formLabelWidth" prop="select_file"> <el-upload ref="upload" accept=".xlsx,.xls,.csv" :data="formImportData" :action="action" :on-success="handleSuccess" :limit="1" :headers="headers" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只能上传.xlsx/.xls/.csv 文件</div> </el-upload> </el-form-item> </el-form> // 验证规则,rule 名字 prop 都没错
importRules: { select_file: [ { required: true, message: '请选择文件', trigger: 'change' } ]}, } // 提交的代码
handleSubmitImport() { this.$refs[this.formImportName].validate((valid) => { if (valid) { this.$refs.upload.submit() } else { return false } })}, 

发表评论

您的电子邮箱地址不会被公开。