<!-- 弹框-->
<el-dialog title=""
:visible.sync="refundFormVisible"
:append-to-body="show"
:before-close="handleClose"
>
<el-form
:model="refundFormData"
ref="refundFormData"
:rules="refundFormRules"
:inline="true"
>
<el-form-item label="附件" label-width="13.5%" prop="refundFile" class="single-column-item" required
ref="uploadFile">
<el-upload
class="upload-demo"
action="上传文件的接口"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="1"
:on-exceed="handleExceed"
:on-success="handleAvatarSuccess"
:file-list="fileList">
<el-button size="mini" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="submitForm">确定</el-button>
<el-button @click.native="handleClose">取 消</el-button>
</div>
</el-dialog>
data(){
return {
fileList:[]
}
}
handleClose() {
this.$refs.refundFormData.resetFields()// 重置数据,同时也取消了表单的校验 refundFormData:el-form用ref绑定的值,
this.fileList = []// 移除上传的文件 data里这个值,用来存上传的文件
this.refundFormVisible = false
},
注意点:dialog的取消按钮和叉号关闭按钮对应的方法时handleCose