element中遇到的坑
before-upload添加自定义参数
官网给出的上传文件钩子只有一个参数为file 如果需要是一个循环 想要标识出是哪个该怎么办呢
这样就可以在下面通过函数接收到自定义参数index
handleBefore(file, index) {}
完美解决了
upload 组件中上传文件会调多次接口,一个文件一个文件进行上传,现在需求需要在一个接口里上传多个文件
<el-upload ref="uploadImg" accept=".png,.jpeg,.jpg,.pdf" :headers="upload.headers" :action="uploadImg.url"
:disabled="false" :on-success="handleFileSuccessImg"
:on-change="handleImgChange"
:on-remove="handleFileRemove"
:auto-upload="false" multiple="true">
<el-button type="primary" :disabled="uploadImg.isUploading">上传附件图片</el-button>
<span class="el-upload__tip" style="color:red;margin-left:10px" slot="tip">提示:仅允许导入图片,pdf文件!</span>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
handleImgChange(file, fileList){ // console.log("文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用"); console.log('文件状态改变时的钩子',file,fileList); this.uploadImg.imgfileList=fileList; }, // 文件列表移除文件时的钩子 handleFileRemove(file, fileList) { console.log("文件列表移除文件时的钩子",file,fileList); this.uploadImg.imgfileList=fileList; }, submitFileForm() { // 手动调用上传方法 // this.$refs.uploadImg.submit(); // console.log("准备提交时获取的文件列表",this.uploadImg.imgfileList); // 创建新的数据对象 var myform = new FormData(); // console.log(dataFile); myform.append('examPlanId', this.examPlan.id); this.uploadImg.imgfileList.forEach((item)=>{ myform.append('files',item.raw) }) console.log(myform); uploadBatchImgs(myform).then(res=>{ }) // 清空上传数据列表 this.$refs.uploadImg.clearFiles(); this.uploadImg.imgfileList=[]; this.$refs.uploadExecl.clearFiles(); // this.upload.open = false; // 重新获取列表信息 this.signListInfo(); },
当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent。
el-table组件里面 添加序号 并且序号在翻页时可以连续显示 而不是从0开始
<el-table-column
label="序号"
type="index"
:index="indexFn"
width="50">
</el-table-column>
methods: {
indexFn(index){
return `${(this.queryParams.pageNum-1)*this.queryParams.pageSize+index+1}`
}
}
Message 消息提示那些不起眼却有时候很好用的配置属性
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
response.list.forEach(item=>{ html+=`<strong style="color:red;margin-right:20px; line-height:150%">${item.name}</strong>` }) // let html=`<strong>这是 <i>HTML</i> 片段</strong>` this.$message({ iconClass:'null', showClose: true, type:"warning", dangerouslyUseHTMLString: true, //是否将 message 属性作为 HTML 片段处理 message: "<p>上传失败附件如下:</p>"+html, //这里追加的是根据数据处理后的html
onClose:()=>{
//此处写提示关闭后需要执行的函数
}
});