el-table 每一行 的单元格内带upload 上传;并加载附件
.附件上传
我写的是选取文件后,直接上传与存数据库,所以不需要做太多操作;
重点难点是加载每一行单元格内的附件
<template slot-scope="scope"> <el-upload ref="upload" :limit="10" :action="upload.url" :headers="upload.headers" multiple :file-list="scope.row.fileList" :on-exceed="handleExceed" :before-upload="beforeAvatarUpload" :on-remove="handleRemove" :on-progress="handleFileUploadProgress" :on-success=" (response, file, fileList) => handleFileSuccess( response, file, fileList, scope.$index ) " :on-preview="handlePreview" :auto-upload="true"> <el-button slot="trigger" size="small" type="primary" @click="savefile(scope.row)">选取文件</el-button> <!-- <el-button style="margin-left: 30px;margin-top: 20px" size="small" type="primary" :loading="upload.isUploading" @click="submitUpload">确认</el-button>--> </el-upload> </template>
:file-list 属性不能再data中写固定的定义
js中循环给fileList 赋值与置空
this.xueqianxxList.forEach((item)=>{
// console.log("item---",item)
if (item.filepath!=null&&item.filepath!=""){
this.fileList=[]
item.filepath.split('|').forEach((item) => {
if (item.trim().length > 0) {
this.fileList.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
}
})
item.fileList = this.fileList;
}else{
item.fileList = [];
}
})