怎么在点击上传文件的时候,将上传的文件,存到对应的对象中,并刷新视图?
视图部分
<el-table :data="fileListData" border>
<el-table-column align="center" width="50px">
<template slot-scope="scope">
<span v-if="scope.row.required" class="required_text"
>*</span
>
</template>
</el-table-column>
<el-table-column
type="index"
label="序号"
align="center"
width="80"
></el-table-column>
<el-table-column
label="文件"
prop="fileName"
align="center"
width="300px"
></el-table-column>
<el-table-column label="附件" align="center">
<template slot-scope="scope">
<div v-if="scope.row.fileAnnex != ''">
<a href="scope.row.fileAnnex"
>{{scope.row.fileAnnexName}}</a
>
<el-button
type="text"
size="small"
icon="el-icon-view"
>预览</el-button
>
<el-button
type="text"
size="small"
icon="el-icon-delete"
>删除</el-button
>
</div>
<div v-else>--</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120">
<template slot-scope="scope">
<el-upload
class="awards_upload"
:action="ms.base+'/ms/file/upload.do'"
:on-remove="filePathHandleRemove"
:limit="1"
:data="{uploadPath:'/people/user','isRename':true,'appId':true}"
:on-success="filePathBasicPicSuccess(scope.row.fileId)"
:on-exceed="filePathHandleExceed"
:on-progress="filePathHandleProgress"
accept=".pdf"
show-file-list="false"
:file-list="scope.row.fileAnnex"
>
<el-button size="small" type="primary"
>点击上传</el-button
>
</el-upload>
</template>
</el-table-column>
</el-table>
js部分
fileListData: [
{
fileId: "fileName1",
fileName: "项目基本情况表(盖章后扫描为pdf版)",
fileAnnex: "",
fileAnnexName: "",
required: true,
},
{
fileId: "fileName2",
fileName: "项目简介",
fileAnnex: "",
fileAnnexName: "",
required: true,
},]
//上传超过限制
filePathHandleExceed(files, fileList) {
this.$notify({
title: "当前最多上传1份文件",
type: "warning",
});
},
//filePath文件上传完成回调
filePathBasicPicSuccess(response, file, fileList) {
if (response.result) {
// this.filePath = response.data;
// console.log(file);
// this.ruleForm.filePath = [];
// this.ruleForm.filePath.push({
// name: file.name,
// url: file.url,
// path: response.data,
// uid: file.uid,
// });
// this.isShow = true;
console.log(this.filePath, this.ruleForm.filePath);
} else {
this.$notify({
title: response.msg,
type: "warning",
});
}
},
// 删除方法
filePathHandleRemove(file, files) {
var index = -1;
index = this.ruleForm.filePath.findIndex(function (text) {
return text == file;
});
if (index != -1) {
this.ruleForm.filePath.splice(index, 1);
}
this.isShow = false;
},
filePathHandleProgress(event, file, fileList) {
console.log(event, file, fileList);
},
回复
1个回答
test
2024-06-28
方法1:
<el-table
ref="table"
:data="tableData"
:key="itemKey"
></el-table>
// 在tableData更新的地方,顺便随机设置下key,页面就会刷新了
this.itemKey = Math.random()
方法2:用更新后的数据,覆盖之前的数据
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容