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


     

    1. <el-table :data="tableData" v-loading="loading" style="width: 100%" height="calc(100vh - 270px)" :size="tableSize"
    2. @row-dblclick="enterClick">
    3. <el-table-column prop="name" label="文档名称" show-overflow-tooltip v-if="checkedCities.indexOf(0) !== -1" width="300"
    4. align="left">
    5. <template #default="scope">
    6. <span>
    7. <img :src="scope.row.icon" alt="" style="width: 18px;">
    8. {{ scope.row.name }}
    9. span>
    10. template>
    11. el-table-column>
    12. el-table>
    1. let iconList: any = [
    2. {
    3. suffix: '.xls',
    4. icon: '/src/assets/fileImg/xls(1).png'
    5. },
    6. {
    7. suffix: '.xlsx',
    8. icon: '/src/assets/fileImg/xls(1).png'
    9. },
    10. {
    11. suffix: '.pdf',
    12. icon: '/src/assets/fileImg/PDF.png'
    13. },
    14. {
    15. suffix: '.dll',
    16. icon: '/src/assets/fileImg/dll.png'
    17. },
    18. {
    19. suffix: '.vue',
    20. icon: '/src/assets/fileImg/Vue(1).png'
    21. },
    22. {
    23. suffix: '.html',
    24. icon: '/src/assets/fileImg/HTML(1).png'
    25. },
    26. {
    27. suffix: '.txt',
    28. icon: '/src/assets/fileImg/txt.png'
    29. },
    30. {
    31. suffix: '.docx',
    32. icon: '/src/assets/fileImg/docx_doc.png'
    33. },
    34. {
    35. suffix: '.json',
    36. icon: '/src/assets/fileImg/JSON.png'
    37. },
    38. {
    39. suffix: '.png',
    40. icon: '/src/assets/fileImg/png.png'
    41. }
    42. ]
    43. // 初始化表格数据
    44. const getTableData = async () => {
    45. try {
    46. loading.value = true
    47. const res = await getFileList()
    48. //根据字段类型排序
    49. const sortedData = computed(() => {
    50. return res.slice().sort((a: any, b: any) => a.documentType - b.documentType);
    51. });
    52. for (let i = 0; i < sortedData.value.length; i++) {
    53. let suffix = sortedData.value[i].fileSuffix;
    54. let documentType = sortedData.value[i].documentType;
    55. for (let j = 0; j < iconList.length; j++) {
    56. if (iconList[j].suffix === suffix) {
    57. sortedData.value[i].icon = iconList[j].icon;
    58. break;
    59. } else if (iconList[j].suffix !== suffix && documentType === 2) {
    60. sortedData.value[i].icon = '/src/assets/fileImg/txt.png';
    61. } else if (documentType === 1) {
    62. sortedData.value[i].icon = '/src/assets/fileImg/file.png';
    63. }
    64. }
    65. }
    66. tableData = sortedData.value
    67. loading.value = false
    68. } catch {
    69. loading.value = true
    70. }
    71. }

  • 相关阅读:
    记录一次Golang逃逸分析
    React学习计划-react-hooks补充
    计算机网络:流量控制与可靠传输机制
    vue中,封装组件demo
    SpringBoot整合Caffeine实现缓存
    【博客441】Linux自制内核模块(LKM)
    openjudge 1.5.1 求平均年龄
    基于定容积法标准容器容积标定中的电动针阀自动化解决方案
    中国电子学会2023年09月份青少年软件编程Scratch图形化等级考试试卷二级真题(含答案)
    JS常见的报错及异常捕获
  • 原文地址:https://blog.csdn.net/xiaoming4965/article/details/134073152