仅做记录 代码写的一般 如有错误或更好的写法 请指出 谢谢
需求 用expand以表格展示上传的附件
数据格式 后端返回的数据是 files:id,id,id.... 前端展示时需要主动去调用接口来获取文件的信息
实现思路 el-table-colum type=“expand” 配合 el-table expand-change方法
代码实现
<el-table :expandChange="handleExpandChange" v-loading="lodaing">
<el-table-column label="" prop="id" align="right" type="expand">
<template slot-scope="scope">
<el-table v-loading="annexLoading" :data="scope.row.annexTableData">
<el-table-column
label="序号"
prop=""
type="index"
width="100"
align="center"
/>
<el-table-column
label="附件名称"
prop="fileName"
show-overflow-tooltip
width="150"
align="center"
>
<template slot-scope="scope">
<div
style="cursor: pointer; color: #409eff"
title="下载"
@click="fileDownload(scope.row.businessId)"
>
{{ scope.row.fileName }}
</div>
</template>
</el-table-column>
<el-table-column
label="上传时间"
prop="updateTime"
width="200"
align="center"
/>
<el-table-column
label="上传人"
prop="updateName"
width="100"
align="center"
/>
<el-table-column
label="附件数量"
width="100"
prop=""
align="center"
>
<template> 1 </template>
</el-table-column>
<el-table-column width="aotu" prop="" align="center" />
</el-table>
</template>
</el-table-column>
</el-table>
methods
async handleExpandChange(row, refresh) {
this.annexLoading = true;
let uploadIds = {};
if (row.files && row.files != null) {
uploadIds = { uploadIds: row.files.split(",") };
} else {
uploadIds = { uploadIds: [] };
}
Object.assign(row, uploadIds);
let annexTableData = { annexTableData: [] };
if (row.uploadIds && row.uploadIds.length > 0) {
//接口只可以传入一个id的写法
// let fileListPromises = [];
// row.uploadIds.forEach((uploadId) => {
// const promise = getFileListByBusinessIds(uploadId);
// fileListPromises.push(promise);
// });
// Promise.all(fileListPromises).then((res) => {
// res.forEach((item) => {
// if (item.code == 200) {
// annexTableData.annexTableData.push(item.data[0]);
// }
// });
// });
//接口接受传入一个数组的写法
const res = await getFileListByBusinessIds(row.uploadIds);
if (res.code == 200) {
annexTableData.annexTableData.push(...res.data);
}
} else {
annexTableData = { annexTableData: [] };
}
Object.assign(row, annexTableData);
this.$set(row, row);
let timer = setTimeout(() => {
this.annexLoading = false;
clearTimeout(timer);
}, 300);
},
//点击进行下载
async fileDownload(businessId) {
const result = await getUrlByBusinessId(businessId);
const a = document.createElement("a");
a.href = `${result.data[0].fileUrl}?Authorization=${
"Bearer " + getToken()
}`;
a.click();
},