上次
上次计划
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 docxSvg
case "ppt":
return pptSvg
case "excel":
return excelSvg
case "pdf":
return pdfSvg
default:
return otherSvg
}
}
