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

html 复制代码
   <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>
javascript 复制代码
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
  }
}
相关推荐
福兮说2 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理3 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
专业程序开发源3 小时前
springboot简历管理系统81389-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·php·课程设计
专业程序开发源4 小时前
springboot社区养老系统44071-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·php·课程设计
小呆呆6664 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
凤城老人4 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)4 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan5 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_5 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒5 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端