当前位置: 首页 > 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}
}

http://www.lryc.cn/news/210465.html

相关文章:

  • [论文阅读]Ghost-free High Dynamic Range Imaging with Context-aware Transformer
  • react高阶成分(HOC)例子效果
  • 【24种设计模式】工厂模式(Factory Pattern)
  • 树——对称二叉树
  • 拉扎维模拟CMOS集成电路设计西交张鸿老师课程P10~13视频学习记录
  • 3.线性神经网络
  • python常用内置函数的介绍和使用
  • 2023辽宁省赛E
  • visual studio 启用C++11
  • 获取某个抖音用户的视频列表信息
  • 【C语言】strcpy()函数(字符串拷贝函数详解)
  • 机器学习之IV编码,分箱WOE编码
  • 区块链技术与应用 【全国职业院校技能大赛国赛题目解析】第六套区块链系统部署与运维
  • 山西电力市场日前价格预测【2023-10-30】
  • win10虚拟机安装教程
  • 2011-2021年“第四期”数字普惠金融与上市公司匹配(根据城市匹配)/上市公司数字普惠金融指数匹配数据
  • CSP-J 2023 T3 一元二次方程 解题报告
  • 中颖单片机SH367309全套量产PCM,专用动力电池保护板开发资料
  • Android数据对象序列化原理与应用
  • Linux cp命令:复制文件和目录
  • SpringBoot 接收不到 post 请求数据与接收 post 请求数据
  • vue3学习(十四)--- vue3中css新特性
  • Python爬虫基础之Requests详解
  • C++求根节点到叶子节点数字之和
  • C++搜索二叉树
  • 软件工程17-18期末试卷
  • 课题学习(九)----阅读《导向钻井工具姿态动态测量的自适应滤波方法》论文笔记
  • 阿里云服务器—ECS快速入门
  • Hive简介及核心概念
  • CrossOver 23.6.0 虚拟机新功能介绍