用字母做logo的网站网站免费建站app
上次
上次计划
1、最近文档表格完善
2、实现登录功能
3、新建文件，复制文件，删除文件
4、其他
目前任务：最近文档表格完善
1、在名称前面，渲染这个文档的图标
2、大小的基本的单位是kb，超过1024kb则换成mb，主要是这两个单位
3、数据按照最近访问时间倒序
4、给文件名价格链接，实现和编辑按钮相同的功能
5、实现编辑的功能
6、实现删除的功能
7、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做
在名称前面，渲染这个文档的图标
先实现body的插槽，对name做自定义渲染
<template #bodyCell="{ column, record }"><template v-if="column.key === 'action'"><a-space><a-button>编辑</a-button><a-button>删除</a-button><a-button>分享</a-button></a-space></template><template v-else-if="column.key === 'name'">{{ record[column.key] }}</template><template v-else>{{ record[column.key] }}</template></template>
准备svg图片资源
导入svg图片
import docxSvg from "../../assets/svg/docx.svg"
渲染svg图片
<template v-else-if="column.key === 'name'"><div><img :src="docxSvg" alt=""><span>{{ record[column.key] }}</span></div>
</template>
效果预览
整合Tailwindcss
参考文章：https://blog.csdn.net/qq_37703224/article/details/139401458
使用Tailwindcss优化表格
优化图标的显示
<template v-else-if="column.key === 'name'"><div class="flex items-center justify-center"><img :src="docxSvg" class="w-5 h-5 mr-1"><span>{{ record[column.key] }}</span></div>
</template>
渲染效果：
图标应该根据类型动态切换思路
要实现这个功能，我们要么借助函数，要么借助计算属性。
计算属性比较适合不经常改变的数据，所以这里我们选择使用函数。
这里的图标，主要考虑五种情况：
- docx：表示文档图标
- ppt：表示PPT文件图标
- excel：表示Excel文件图标
- pdf：表示PDF文件图标
- other：其他文档图标
我们只需要准备好对应的svg图片，然后在一个函数中，通过switch进行动态捕获即可。
准备对应的svg图片
图标应该根据类型动态切换代码
导入图片：
import docxSvg from "../../assets/svg/docx.svg"
import excelSvg from "../../assets/svg/excel.svg"
import otherSvg from "../../assets/svg/other.svg"
import pdfSvg from "../../assets/svg/pdf.svg"
import pptSvg from "../../assets/svg/ppt.svg"
实现方法：
const getSvg = (typeStr) => {switch (typeStr) {case "docx":return docxSvgcase "ppt":return pptSvgcase "excel":return excelSvgcase "pdf":return pdfSvgdefault:return otherSvg}
}