当前位置：首页 > news >正文

zdpy+vue3+onlyoffice文档系统实战上课笔记 20240805

news 2025/7/20 6:39:20

上次

在这里插入图片描述

上次计划

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}
}