当前位置: 首页 > news >正文

前端将图片储存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}
}

相关文章:

前端将图片储存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"文档…...

[论文阅读]Ghost-free High Dynamic Range Imaging with Context-aware Transformer

多帧高动态范围成像&#xff08;High Dynamic Range Imaging, HDRI/HDR&#xff09;旨在通过合并多幅不同曝光程度下的低动态范围图像&#xff0c;生成具有更宽动态范围和更逼真细节的图像。如果这些低动态范围图像完全对齐&#xff0c;则可以很好地融合为HDR图像&#xff0c;但…...

react高阶成分(HOC)例子效果

使用React函数式组件写了一个身份验证的一个功能&#xff0c;示例通过高阶组件实现的一个效果展示&#xff1a; import React, { useState, useEffect } from react;// 定义一个高阶组件&#xff0c;它接受一个组件作为输入&#xff0c;并返回一个新的包装组件 const withAuth…...

【24种设计模式】工厂模式(Factory Pattern)

工厂模式是一种创建型设计模式&#xff0c;它提供了一种创建对象的方式&#xff0c;而无需暴露对象创建的逻辑。在这篇博客中&#xff0c;我们将介绍工厂模式的概念、使用场景以及示例代码。 概念 工厂模式是一种创建型设计模式&#xff0c;它提供了一种创建对象的方式&#…...

树——对称二叉树

leetcode题目地址 树为空树&#xff0c;亦为对称二叉树树非空时&#xff0c;仅需判断其左右子树是否对称判断左右子树对称 (1) 左右子树是否为空&#xff0c;有一个为空 便不对称&#xff0c; 都为空或都不为空 可能对称 (2) 左右子树根节点值是否相同 (3) 判断 左子树 的 左子…...

拉扎维模拟CMOS集成电路设计西交张鸿老师课程P10~13视频学习记录

--------------------------------------------------------------------------------------------------------------------------------- p10 短沟道&#xff0c;除了沟长调&#xff0c;还可能出现速度饱和问题&#xff1b; 但是在拉扎维这本书里面没有考虑这个问题&#…...

3.线性神经网络

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.1 线性回归基础优化算法一、线性回归1、买房案例2、买房模型简化3、线性模型4、神经网络5、损失函数6、训练数据7、参数学习8、显示解9、总结 二、 基础优化算法1、梯度下降2、学习率3、小批量随机梯度下降4、批量大小5、…...

python常用内置函数的介绍和使用

Python具有丰富的内置函数&#xff0c;这些函数是Python语言提供的基础功能。以下是一些常用的内置函数的介绍和使用&#xff1a; print(): 打印输出指定的内容到屏幕。 print("Hello, World!") len(): 返回给定对象的长度或元素个数。 s "Hello, World!"…...

2023辽宁省赛E

Solution 题目大致分为三个步骤 计算 P ( S ) P(S) P(S)证明删除区间连续且找到最值位置根据最值位置求出答案 接下来过程中不合法的组合数都默认为 0 0 0 第 1 步 - 求出总值 考虑 S m { 1 , 2 , ⋯ , m } S_m \{1, 2, \cdots, m\} Sm​{1,2,⋯,m} , 则有 $P(S_{n2}…...

visual studio 启用C++11

用C11取决于你所使用的编译器和开发环境。以下是一些常见的编译器和相应的启用C11的方法&#xff1a; GCC (GNU Compiler Collection): 对于 GCC&#xff0c;你可以在编译时使用 -stdc11 或更高的标志来启用C11支持。例如&#xff1a; g -stdc11 yourfile.cpp -o yourprogramCl…...

获取某个抖音用户的视频列表信息

思路 确定url确定并获取相关参数构造header发送请求解析数据输出数据 运行结果 代码 import requests # 获取某个用户的的视频信息&#xff0c;截至20231028&#xff0c;程序可以正常运行。 # 构造请求头header headers {User-Agent:..........................,Cookie:...…...

【C语言】strcpy()函数(字符串拷贝函数详解)

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:C语言 ⚙️操作环境:Visual Studio 2022 目录 一.strcpy()函数简介 1.函数功能 2.函数参数 1>.char * destination 2>.const char * source 3.函数返回值 4.函数头文件 二.strcpy()函数的具体使用 1.使用s…...

机器学习之IV编码,分箱WOE编码

IV的概念与作用 全称是Information Value&#xff0c;中文的意思是信息价值&#xff0c;或者信息量作用&#xff1a; 1、构建分类模型时&#xff0c;经常需要对特征进行筛选。 2、挑选特征的过程考虑的因素比较多&#xff0c;最主要和最直接的衡量标准是特征的预测能力&#…...

区块链技术与应用 【全国职业院校技能大赛国赛题目解析】第六套区块链系统部署与运维

第六套区块链系统部署与运维题目 环境 : ubuntu20 fisco : 2.8.0 子任务1-2-1: 搭建区块链系统并验证 题意: P2P起始端口 30500 channel起始端口 20500 JSONRPC 8945 使用Docker配置 使用 build_chain.sh 文件 进行生成节点文件 root@192-168-19-133:/yijiu/mode6# bas…...

山西电力市场日前价格预测【2023-10-30】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-10-30&#xff09;山西电力市场全天平均日前电价为309.35元/MWh。其中&#xff0c;最高日前电价为400.33元/MWh&#xff0c;预计出现在18:15。最低日前电价为0.00元/MWh&#xff0c;预计出…...

win10虚拟机安装教程

目录 1、安装VMware 10、12、16都可以&#xff0c;看个人选择 2、开始安装系统&#xff08;以vm16为例&#xff09; 3、在虚拟机中安装win10 完成 1、安装VMware 10、12、16都可以&#xff0c;看个人选择 下面链是我虚拟机安装包&#xff0c;需要可以下载。 YR云盘 软件安…...

2011-2021年“第四期”数字普惠金融与上市公司匹配(根据城市匹配)/上市公司数字普惠金融指数匹配数据

2011-2021年“第四期”数字普惠金融与上市公司匹配&#xff08;根据城市匹配&#xff09;/上市公司数字普惠金融指数匹配数据 1、时间&#xff1a;2011-2021年 指标&#xff1a;指标&#xff1a;股票代码、年份、行政区划代码、行业名称、行业代码、所属省份、所属城市、数字…...

CSP-J 2023 T3 一元二次方程 解题报告

CSP-J 2023 T3 一元二次方程 解题报告 Link 前言 今年 C S P CSP CSP的原题, 回家 1 h 1h 1h内写 A C AC AC, 但是考场上没有写出来 , 原因是脑子太不好了, 竟然调了两个小时没有调出来. 一等奖悬那… 正题 看完题目,第一眼就是大模拟, 并且 C C F CCF CCF绝对不会让你好受…...

中颖单片机SH367309全套量产PCM,专用动力电池保护板开发资料

方案总体介绍 整套方案硬件部分共2块板子&#xff0c;包括MCU主板&#xff0c;采用SH79F6441-32作为主处理器。MCU主板包括2个版本。PCM动力电池保护板采用SH367309。 软件方案采用Keil51建立的工程&#xff0c;带蓝牙的版本&#xff0c;支持5~16S电池。 硬件方案--MCU主板 MC…...

Android数据对象序列化原理与应用

序列化与反序列化 序列化是将对象转换为可以存储或传输的格式的过程。在计算机科学中&#xff0c;对象通常是指内存中的数据结构&#xff0c;如数组、列表、字典等。通过序列化&#xff0c;可以将这些对象转换为字节流或文本格式&#xff0c;以便在不同的系统之间进行传输或存…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...