前端将图片储存table表格中,页面回显

 

   <el-table :data="tableData" v-loading="loading" style="width: 100%" height="calc(100vh - 270px)" :size="tableSize"@row-dblclick="enterClick"><el-table-column prop="name" label="文档名称" show-overflow-tooltip v-if="checkedCities.indexOf(0) !== -1" width="300"align="left"><template #default="scope"><span><img :src="scope.row.icon" alt="" style="width: 18px;">{{ scope.row.name }}</span></template></el-table-column></el-table>
let iconList: any = [{suffix: '.xls',icon: '/src/assets/fileImg/xls(1).png'},{suffix: '.xlsx',icon: '/src/assets/fileImg/xls(1).png'},{suffix: '.pdf',icon: '/src/assets/fileImg/PDF.png'},{suffix: '.dll',icon: '/src/assets/fileImg/dll.png'},{suffix: '.vue',icon: '/src/assets/fileImg/Vue(1).png'},{suffix: '.html',icon: '/src/assets/fileImg/HTML(1).png'},{suffix: '.txt',icon: '/src/assets/fileImg/txt.png'},{suffix: '.docx',icon: '/src/assets/fileImg/docx_doc.png'},{suffix: '.json',icon: '/src/assets/fileImg/JSON.png'},{suffix: '.png',icon: '/src/assets/fileImg/png.png'}
]// 初始化表格数据
const getTableData = async () => {try {loading.value = trueconst res = await getFileList()//根据字段类型排序const sortedData = computed(() => {return res.slice().sort((a: any, b: any) => a.documentType - b.documentType);});for (let i = 0; i < sortedData.value.length; i++) {let suffix = sortedData.value[i].fileSuffix;let documentType = sortedData.value[i].documentType;for (let j = 0; j < iconList.length; j++) {if (iconList[j].suffix === suffix) {sortedData.value[i].icon = iconList[j].icon;break;} else if (iconList[j].suffix !== suffix && documentType === 2) {sortedData.value[i].icon = '/src/assets/fileImg/txt.png';} else if (documentType === 1) {sortedData.value[i].icon = '/src/assets/fileImg/file.png';}}}tableData = sortedData.valueloading.value = false} catch {loading.value = true}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/172908.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像数据噪音种类以及Python生成对应噪音

前言 当涉及到图像处理和计算机视觉任务时&#xff0c;噪音是一个不可忽视的因素。噪音可以由多种因素引起&#xff0c;如传感器误差、通信干扰、环境光线变化等。这些噪音会导致图像质量下降&#xff0c;从而影响到后续的图像分析和处理过程。因此&#xff0c;对于从图像中获…

数据结构时间复杂度(补充)和空间复杂度

Hello&#xff0c;今天事10月27日&#xff0c;距离刚开始写博客已经过去挺久了&#xff0c;我也不知道是什么让我坚持这么久&#xff0c;但是学校的课真的很多&#xff0c;很少有时间多出来再学习&#xff0c;有些科目马上要考试了&#xff0c;我还不知道我呢不能过哈哈哈&…

新的iLeakage攻击从Apple Safari窃取电子邮件和密码

图片 导语&#xff1a;学术研究人员开发出一种新的推测性侧信道攻击&#xff0c;名为iLeakage&#xff0c;可在所有最新的Apple设备上运行&#xff0c;并从Safari浏览器中提取敏感信息。 攻击概述 iLeakage是一种新型的推测性执行攻击&#xff0c;针对的是Apple Silicon CPU和…

私有云:【3】NFS存储服务器的安装

私有云&#xff1a;【3】NFS存储服务器的安装 1、使用vmwork创建虚拟机2、配置NFS服务器3、安装NFS存储服务4、配置NFS服务及创建存储共享 1、使用vmwork创建虚拟机 新建虚拟机NFS 分配400G硬盘&#xff0c;可以更高【用作存储】 自定义硬件 选择win2012的iso文件 设置登录密码…

电脑有自带的录屏功能吗win7

win7有自带的录屏软件&#xff0c;名字叫“问题步骤记录器”&#xff0c;可以实现将每一步操作截成图片&#xff0c;并自动配以相关文字说明的功能。打开记录器的方法&#xff1a;1、按“WinR”键&#xff0c;打开“运行”窗口&#xff1b;2、在“运行”窗口中&#xff0c;输入…

SpringBoot内置工具类之断言Assert的使用与部分解析

先例举一个service的demo中用来验证参数对象的封装方法&#xff0c;使用了Assert工具类后是不是比普通的 if(xxx) { throw new RuntimeException(msg) } 看上去要简洁多了&#xff1f; 断言Assert工具类简介 断言是一个判断逻辑&#xff0c;用来检查不该发生的情况&#xff…

【C++的OpenCV】第十四课-OpenCV基础强化(二):访问单通道Mat中的值

&#x1f389;&#x1f389;&#x1f389; 欢迎各位来到小白 p i a o 的学习空间&#xff01; \color{red}{欢迎各位来到小白piao的学习空间&#xff01;} 欢迎各位来到小白piao的学习空间&#xff01;&#x1f389;&#x1f389;&#x1f389; &#x1f496;&#x1f496;&…

【错误解决方案】ModuleNotFoundError: No module named ‘cPickle‘

1. 错误提示 在python程序中试图导入一个名为cPickle的模块&#xff0c;但Python提示找不到这个模块。 错误提示&#xff1a;ModuleNotFoundError: No module named cPickle 2. 解决方案 实际上&#xff0c;cPickle是Python的pickle模块的一个C语言实现&#xff0c;通常用于…

MySQL实战2

文章目录 主要内容一.回访用户1.准备工作代码如下&#xff08;示例&#xff09;: 2.目标3.实现代码如下&#xff08;示例&#xff09;: 二.如何找到每个人每月消费的最大天数1.准备工作代码如下&#xff08;示例&#xff09;: 2.目标3.实现代码如下&#xff08;示例&#xff09…

Windows查看核心与线程数

文章目录 前言一、可视化界面1、任务管理器2、设备管理器3、CPU-Z 二、命令或程序1、cmd命令2、Java程序 前言 查询电脑硬件CPU信息命令的学习&#xff0c;予以记录&#xff01; 参考博客&#xff1a;https://blog.csdn.net/huazicomeon/article/details/53540852 一、可视化界…

【计算机网络笔记】Web缓存/代理服务器技术

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

洗衣行业在线预约小程序+前后端完整搭建教程

大家好哇&#xff0c;好久不见&#xff01;今天源码师父来给大家推荐一款洗衣行业在线预约的小程序&#xff0c;带有前后端的完整搭建教程。 目前&#xff0c;人们对生活品质的追求不断提高&#xff0c;但生活节奏却也不断加快。对品质的追求遇到了忙碌的生活节奏&#xff0c;…

Linux ———— 管理磁盘

&#xff08;一&#xff09;MBR硬盘与GPT硬盘 硬盘按分区表的格式可以分为MBR硬盘与GPT硬盘两种硬盘格式。 MBR 硬盘&#xff1a;使用的是旧的传统硬盘分区表格式&#xff0c;其硬盘分区表存储在MBR(Master Boot Record&#xff0c;主引导区记录&#xff09;内。MBR位于…

【错误解决方案】ModuleNotFoundError: No module named ‘torch._six‘

1. 错误提示 在python程序中&#xff0c;试图导入一个名为torch._six的模块&#xff0c;但Python提示找不到这个模块。 错误提示&#xff1a;ModuleNotFoundError: No module named torch._six 2. 解决方案 出现这个错误可能是因为你使用的PyTorch版本和你的代码不兼容。在某…

OSPF,RIP和BGP的路由汇总

OSPF路由汇总 OSPF的路由汇总需要注意以下两点 1.OSPF的路由汇总仅支持手动汇总 注&#xff1a;距离矢量路由协议支持自动路由汇总&#xff0c;链路状态路由协议仅支持手动路由汇总&#xff08;OSPF,ISIS&#xff09; 2.OSPF的路由汇总只在区域边界进行汇总 OSPF的路由汇总…

信息系统项目管理师教程 第四版【第3章-信息系统治理-思维导图】

信息系统项目管理师教程 第四版【第3章-信息系统治理-思维导图】

Pandas时间序列、时间戳对象、类型转换、时间序列提取、筛选、重采样、窗口滑动

时间序列数据是指在时间间隔不变的情况下收集的时间点数据&#xff0c;可以用来分析事物的长期发展趋势&#xff0c;并对未来进行预测。 date_range()方法及参数 pandas.date_range(startNone, endNone, periodsNone, freqNone, tzNone, normalizeFalse, nameNone, inclusive‘…

cosover是什么?crossover23又是什么软件

cosover是篮球里的过人技巧。 1.crossover在篮球中的本意是交叉步和急速交叉步。crossover 是篮球术语&#xff0c;有胯下运球、双手交替运球&#xff0c;交叉步过人、急速大幅度变向等之意。 2.在NBA里是指包括胯下运球、变向、插花在内的过人的技巧。 NBA有很多著名的Cross…

Pytorch整体工作流程代码详解(新手入门)

一、前言 本文详细介绍Pytorch的基本工作流程及代码&#xff0c;以及如何在GPU上训练模型&#xff08;如下图所示&#xff09;包括数据准备、模型搭建、模型训练、评估及模型的保存和载入。 适用读者&#xff1a;有一定的Python和机器学习基础的深度学习/Pytorch初学者。 本文…

vue3.0运行npm run dev 报错Cannot find module node:url

vue3.0运行npm run dev 报错Cannot find module 问题背景 近期用vue3.0写项目&#xff0c;npm init vuelatest —> npm install 都正常,npm run dev的时候报错如下&#xff1a; failed to load config from F:\code\testVue\vue-demo\vite.config.js error when starting…