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 = [];
}
})

浙公网安备 33010602011771号