前端将图片储存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.mzph.cn/news/124684.shtml

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

相关文章

在Windows上安装Elasticsearch-8.x.x

前言 Elasticsearch 是一种流行的开源搜索和分析引擎&#xff0c;它提供了强大的全文搜索和实时数据分析功能&#xff0c;被广泛应用于各种领域&#xff0c;包括大数据分析、日志处理、企业搜索等。 一、下载 Elasticsearch 官方网站&#xff08;https://www.elastic.co/dow…

【PC】特殊空投-2023年10月

亲爱的玩家朋友们&#xff0c;大家好&#xff01; 10月特殊空投活动来袭。本月我们也准备了超多活动等着大家来体验。快来完成任务获得丰富的奖励吧&#xff01;签到活动&#xff0c;每周一次的PUBG空投节&#xff0c;还有可以领取PGC2023免费投票劵的活动等着大家&#xff01;…

调试AOSP源码的官方神器-Android Studio for Platform(ASfP)

文章目录 下载安装启动AOSP导入调试不足 欢迎关注微信公众号ZZH的Android 下载 下载地址平台版 Android Studio 由于该工具在调试源码时需要对AOSP进行编译&#xff0c;所以目前只有Ubuntu版本&#xff0c;后续应该也只会有Ubuntu版本。 Ubuntu环境下显示可下载 Windows系统…

python学习-Logistic回归与Softmax回归

图像分类数据集有CIFAR-10、ImageNet 应用&#xff1a;情感分类 关键&#xff1a;将样本x从文本形式转为向量形式 词袋模型&#xff08;Bag-of-Words&#xff0c;BoW&#xff09; 模型性能的评估指标 混淆矩阵&#xff08;confusion matrix&#xff09; 对于二分类问题&am…

ChinaSoft 论坛巡礼 | 智慧化 IDE 论坛

2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…

中文编程开发语言工具系统化教程零基础入门篇和初级1专辑课程已经上线,可以进入轻松学编程

中文编程开发语言工具系统化教程零基础入门篇和初级1专辑课程已经上线&#xff0c;可以进入轻松学编程 学习编程捷径&#xff1a;&#xff08;不论是正在学习编程的大学生&#xff0c;还是IT人士或者是编程爱好者&#xff0c;在学习编程的过程中用正确的学习方法 可以达到事半…

SSH 无密登录设置

1 &#xff09; 配置 ssh &#xff08;1&#xff09;基本语法 ssh 另一台电脑的 IP 地址&#xff08;2&#xff09;ssh 连接时出现 Host key verification failed 的解决方法 [libaihadoop102 ~]$ ssh hadoop103 ➢ 如果出现如下内容 Are you sure you want to continue c…

基于物联网、大数据、云计算、人工智能等技术的智慧工地源码(Java+Spring Cloud +UniApp +MySql)

智慧工地是指利用物联网、大数据、云计算、人工智能等技术手段&#xff0c;为建筑施工现场提供智能硬件及物联网平台的解决方案&#xff0c;实现建筑工地的实时化、可视化、多元化、智慧化、便捷化。智慧工地的建设目标是实现全天候的管理监控&#xff0c;提高施工效率和质量&a…

电子电器架构 —— 车载网关初入门(二)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数5000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他…

SV-10A-4G IP网络报警非可视终端 (4G版)

SV-10A-4G IP网络报警非可视终端 &#xff08;4G版&#xff09; https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.621e3d0dpv5knb&ftt&id745728046948 产品简介&#xff1a; 通过局域网/广域网网组网的网络报警系统&#xff0c;改变传统局域网组网…

算法通关村第四关-黄金挑战栈的经典问题

括号匹配问题 描述 : 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有…

Kubernetes Service 详解

Author&#xff1a;rab 目录 前言一、ClusterIP1.1 简介1.2 案例 二、NodePort2.1 简介2.2 案例 三、LoadBalancer3.1 简介3.1.1 MetalLB 简介3.1.2 MetalLB 部署3.1.3 MetalLB 配置3.1.3.1 Layer 2 模式3.1.3.2 BGP 模式 3.2 案例3.2.1 部署3.2.2 验证 四、ExternalName4.1 简…

【c++|opencv】一、基础操作---1.图像读取

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 有关c操作opencv记录 1. 正文 1.1 图像读取、显示、保存 // 读取、显示、保存图像#include <opencv2/opencv.hpp> #include <iostream>us…

【uniapp】uniapp实现input输入显示数字键盘:

文章目录 一、官网文档&#xff1a;二、文档&#xff1a;三、效果&#xff1a;【1】number&#xff1a;iPhone原生数字键盘不显示小数点【2】digit&#xff1a;【3】digit和inputmode&#xff1a; 一、官网文档&#xff1a; input | uni-app官网 二、文档&#xff1a; 三、效果…

软考网工历年简答题汇总(2016下半年~2023年上半年)

目录 2016年下半年 2018年上半年 2018年下半年 2021年上半年 2022年上半年 2022年下半年 2023年上半年 2016年下半年 试题一&#xff1a; 【问题 3】若地址规划如图 1-1 所示&#xff0c;从IP 规划方案看该地址的配置可能有哪些方面的考虑&#xff1f; 答案&#xff…

python excel接口自动化测试框架

前言 前些天写了pytestyamlallure接口自动化测试框架这篇文章。 今天采用Excel继续写一个接口自动化测试框架。 设计流程图 这张图是我的excel接口测试框架的一些设计思路。 首先读取excel文件&#xff0c;得到测试信息&#xff0c;然后通过封装的requests方法&#xff0c…

38基于matlab的期货预测,利用PSO优化SVM和未优化的SVM进行对比,得到实际输出和期望输出结果。

基于matlab的期货预测&#xff0c;利用PSO优化SVM和未优化的SVM进行对比&#xff0c;得到实际输出和期望输出结果。线性核函数、多项式、RBF核函数三种核函数任意可选&#xff0c;并给出均方根误差&#xff0c;相对误差等结果&#xff0c;程序已调通&#xff0c;可直接运行。 3…

公网远程访问macOS本地web服务器

# 公网访问macOS本地web服务器【内网穿透】 文章目录 1. 启动Apache服务器2. 公网访问本地web服务2.1 本地安装配置cpolar2.2 创建隧道2.3 测试访问公网地址3. 配置固定二级子域名3.1 保留一个二级子域名3.2 配置二级子域名4. 测试访问公网固定二级子域名 以macOS自带的Apache…

【C++进阶】pair容器

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

react中的useState和useImmer的用法

文章目录 一、useState1. 更新基本类型数据2. 更新对象3. 更新嵌套对象4. 更新数组5.更新数组对象 二、Immer1. 什么是Immer2. 使用use-immer更新嵌套对象3. 使用useImmer更新数组内部的对象 一、useState react中文官网教程 1. 更新基本类型数据 在函数式组件中&#xff0c…