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

news2024/11/18 8:52:15

 

   <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 = true
    const 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.value
    loading.value = false
  } catch {
    loading.value = true
  }
}

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

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

相关文章

代码随想录Day30 贪心05 LeetCode T435无重叠区间 T763划分字母区间 T56 合并区间

LeetCode T435 无重叠区间 题目链接:435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 这题思路和昨天的打气球类似,我们需要按照左区间或者右区间进行排序,然后哦判断第i个区间的左端点和第i-1个区间的右端点的大小关系,,如果大于等于,那么就无需操作,一旦…

一文搞懂 MineCraft 服务器启动操作和常见问题 2023年10月

文章目录 前言1. 新建文件夹2. 创建 bat 文件3. 编辑 bat 文件4. 启动服务器5. 恭喜完成 文章持续更新中&#xff0c;如果你有问题可以通过 qq 1317699264 获取免费协助&#xff0c;解决的问题将会被更新到本文章中 前言 无论你是使用服务端整合包&#xff0c;还是从上一篇我的…

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、…

Gerrit | 重磅! 2.x 版本升级到 3.x 版本----转

Gerrit | 重磅! 2.x 版本升级到 3.x 版本 为什么要做版本升级&#xff1f; 2.x known bugs 重大问题不一一列举&#xff0c;这里仅仅是举几个例子&#xff1a; 安全或权限问题&#xff1a;普通用户能看到敏感数据&#xff0c;例如看到其他用户的 hashed api 密码&#xff0c…

小程序配置请求代理

在app.json中添加“proxy”字段配置代理 "proxy": {"/api": {"target": "http://192.168.110.249:8221/",//你要请求的目标地址"changeOrigin": true,"pathRewrite": {"^/api": ""//重定向}}…

尚硅谷大数据项目《在线教育之实时数仓》笔记004

视频地址&#xff1a;尚硅谷大数据项目《在线教育之实时数仓》_哔哩哔哩_bilibili 目录 第8章 数仓开发之DIM层 P024 P025 P026 P027 P028 P029 P030 第8章 数仓开发之DIM层 P024 package com.atguigu.edu.realtime.app.func;import com.alibaba.druid.pool.DruidDat…

面向服务的架构设计理论与实践

面向服务的架构设计理论与实践 面向服务的架构概述 SOA的定义 SOA发展现状 面向Web服务的业务流程执行语言(BPEL) BPEL&#xff08;面向Web服务的业务流程执行语言&#xff09;是一种用于描述和执行业务流程的标准化语言。它可以帮助组织在分布式系统中协调和管理各种Web服务…

【C++进阶】set和map的基本使用(灰常详细)

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

QQ云端机器人登录系统php源码开心版

可能很多人不知道这源码有什么用&#xff0c;这款源码主要是针对群机器人爱好者的&#xff0c; 这是一个通过对接挂机宝里面机器人框架的一个网页站点&#xff0c; 用户通过网页登录 QQ 账号至挂机宝里面框架&#xff08;可扫码登录、账密登录、跳转 QQ 快捷登录&#xff09;…

Canal整合SpringBoot详解(一)

文章目录 Canal整合SpringBoot详解&#xff08;一&#xff09;什么是canal搭建Kafka3.2.1集群⭐Kafka集群机器规划创建3台虚拟机&#xff08;centos7系统&#xff09;必要的环境准备&#xff08;3台虚拟机都要执行如下操作&#xff09;⭐分别修改每个服务器的hosts文件&#xf…

【2021集创赛】Robei杯一等奖:基于Robei EDA工具的隔离病房看护机器人设计

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 团队介绍 参赛单位&#xff1a;重庆交通大学 队伍名称&#xff1a;一丘之貉 指导老师&#xff1a;毕波 李艾星 参赛队员&#xff1a;郁航 张坤 秦衡 总决赛奖项&#xff1a;Robei杯一等奖…

iOS开发-CoreNFC实现NFC标签Tag读取功能

iOS开发-CoreNFC实现NFC标签Tag读取功能 一、NFC近场通信 近场通信&#xff08;NFC&#xff09;是一种无线通信技术&#xff0c;它使设备能够在不使用互联网的情况下相互通信。它首先识别附近配备NFC的设备。NFC常用于智能手机和平板电脑。 二、实现NFC标签Tag读取功能 在…

Linux | 进程终止与进程等待

目录 前言 一、进程终止 1、进程终止的几种可能 2、exit 与 _exit 二、进程等待 1、为什么要进程等待 2、如何进行进程等待 &#xff08;1&#xff09;wait函数 &#xff08;2&#xff09;waitpid函数 3、再次深刻理解进程等待 前言 我们前面介绍进程时说子进程退出…

Canal整合SpringBoot详解(二)

文章目录 Canal整合SpringBoot详解&#xff08;二&#xff09;什么是canal案例2&#xff1a;CanalKafka实现mysql和elasticsearch的数据同步⭐Docker搭建elasticsearch7.8.0&#xff08;单机版本&#xff09;⭐Docker安装elasticsearch-head5⭐解决es-head 406错误问题直接修改…

实用篇-Eureka注册中心

一、提供者与消费者 服务提供者&#xff1a;一次业务中&#xff0c;被其他微服务调用的服务。(提供接口给其他微服务) 服务消费者&#xff1a;一次业务中&#xff0c;调用其他微服务的服务。(调用其他微服务提供的接口) 例如前面的案例中&#xff0c;order-service微服务是服…

系列七、动态代理

一、概述 二、Jdk动态代理案例 2.1、Star /*** Author : 一叶浮萍归大海* Date: 2023/10/27 17:16* Description:*/ public interface Star {/*** 唱歌* param name 歌曲名字* return*/String sing(String name);/*** 跳舞*/void dance(); } 2.2、BigStar /*** Author : 一叶…

AcWing 1.2.1 最长上升子序列模型 + 动态规划 + 图解(详细)

&#xff08;1&#xff09;acwing 4557. 最长上升子序列 4557. 最长上升子序列 - AcWing题库 给定一个长度为 N 的整数序列 a1,a2,…,aN。请你计算该序列的最长上升子序列的长度。上升子序列是指数值严格单调递增的子序列 输入格式 第一行包含整数 N第二行包含 N个整数 a1,a…

LLM系列 | 23:多模态大模型:浦语·灵笔InternLM-XComposer解读、实战和思考

引言 ​简介 模型解读 模型架构 训练 实战 环境准备 本地实测 服务部署 总结 引言 谁念西风独自凉&#xff0c;萧萧黄叶闭疏窗&#xff0c;沉思往事立残阳。 Created by DALLE 3 小伙伴们好&#xff0c;我是《小窗幽记机器学习》的小编&#xff1a;卖热干面的小女孩…

在Golang中理解错误处理

处理Golang中临时错误和最终错误的策略和示例 作为一名精通Golang的开发人员&#xff0c;您了解有效的错误处理是编写健壮可靠软件的关键因素。在复杂系统中&#xff0c;错误可能采取各种形式&#xff0c;包括临时故障和最终失败。在本文中&#xff0c;我们将探讨处理Golang中…

源码解析SpringMVC之RequestMapping注解原理

1、启动初始化 核心&#xff1a;得到应用上下文中存在的全部bean后依次遍历&#xff0c;分析每一个目标handler & 目标方法存在的注解RequestMapping&#xff0c;将其相关属性封装为实例RequestMappingInfo。最终将 uri & handler 之间的映射关系维护在类AbstractHand…