<el-table-column prop="documentBasis" label="附件">
//插槽,scope.row获取额是一整行的数据
<template #default="scope">
<el-link
@click="download(item.url, item.name)"(点击触发下载事件,传入文件地址,文件名称)
:icon="Paperclip"(elment plus 的图标,需要import引入,并return出来)
v-for="item in scope.row.workProgram" (遍历的是文件数组)
:key="item.name"
>{{ item.name }}</el-link
</template>
</el-table-column>
在api-->新建 download.ts
import { toast } from "./tips";//提示(可不写)
* 文件下载
* @param fileUrl 文件地址
* @param fileName 文件名
export default async (fileUrl: string(接收实参), fileName: string) => {
toast('文件正在下载中...')
let response = await fetch(fileUrl);
let blob = await response.blob();
let objectUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = objectUrl;
a.download = fileName;
a.click()
a.remove();
CSDN-Ada助手:
element-plus 中的组件国际化
CSDN-Ada助手:
vue3 Element-plus 的配置(按需引入,完整引入)
CSDN-Ada助手:
vite-vue3-antDesign for vue 的按需引入
CSDN-Ada助手:
postcss-pxtorem 插件自动转换 rem 单位的配置
CSDN-Ada助手: