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 = [];
}
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现