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

上次

在这里插入图片描述

上次计划

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/392400.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java | Leetcode Java题解之第318题最大单词长度乘积

题目&#xff1a; 题解&#xff1a; class Solution {public int maxProduct(String[] words) {Map<Integer, Integer> map new HashMap<Integer, Integer>();int length words.length;for (int i 0; i < length; i) {int mask 0;String word words[i];in…

Mysql中事务的读一致性问题,以及如何用MVCC解决

事务四大特性的实现&#xff1a; 原子性事务具有回滚的能力&#xff0c;InnoDB引擎使用undo log日志表来进行回滚操作。 持久性InnoDB引擎使用redo log日志表来保证数据的持久性。 事务的隔离性产生的问题&#xff1a; 脏读&#xff1a;一个事务读取到了另一个事务未提交的数…

Linux系统驱动(五)

文章目录 一、实现机制二、字符设备驱动分布实现流程三、添加自己的系统调用函数1. 找到系统调用文件2. 找到 一、实现机制 应用层 vfs层 驱动层 字符设备按照字节流顺序访问&#xff0c;但是实际它提供了无序访问的功能 vi -t sys_open 内核中通过inode号可以唯一的找到一…

请转告HPC计算AI计算单位,选对存储事半功倍

U.2 NVMe全闪混合统一存储GS 5000U是Infortrend产品中一款高性能机型。得益于搭载强劲的第五代IntelXeon处理器&#xff0c;以及支持PCIe 5.0、NVMe-oF、100GbE等多种特点&#xff0c;GS 5000U单台块级性能可达50 GB/s的读、20 GB/s的写&#xff0c;以及1300K的IOPS&#xff1b…

Xshell安装图文

1.下载 通过百度网盘分享的文件&#xff1a;Xshell安装图文 链接&#xff1a;https://pan.baidu.com/s/1k4ShbhUVQmdxpM9H8UYOSQ 提取码&#xff1a;kdxz --来自百度网盘超级会员V3的分享 2.安装 3.连接与使用 见下载

论文辅导 | 基于二次分解和BO-BiLSTM组合模型采煤工作面瓦斯涌出量预测方法研究

辅导文章 模型描述 结合变分模态分解&#xff08;VMD&#xff09;、自适应噪声完备经验模态分解&#xff08;CEEMDAN&#xff09;、贝叶斯优化算法&#xff08;BO&#xff09;和双向长短期记忆神经网络&#xff08;BiLSTM&#xff09;这4种时间序列处理方法&#xff0c;建立了…

AllReduce通信库;Reduce+LayerNorm+Broadcast 算子;LayerNorm(层归一化)和Broadcast(广播)操作;

目录 AllReduce通信库 一、定义与作用 二、常见AllReduce通信库 三、AllReduce通信算法 四、总结 Reduce+LayerNorm+Broadcast 算子 1. Reduce 算子 2. LayerNorm 算子 3. Broadcast 算子 组合作用 LayerNorm(层归一化)和Broadcast(广播)操作 提出的创新方案解析 优点与潜在…

项目实战_图书管理系统(简易版)

你能学到什么 一个简单的项目——图书管理系统&#xff08;浏览器&#xff1a;谷歌&#xff09;基础版我们只做两个功能&#xff08;因为其它的功能涉及的会比较多&#xff0c;索性就放在升级版里了&#xff0c;基础版先入个门&#xff09; 登录: ⽤⼾输⼊账号,密码完成登录功…

登录相关功能的优化【JWT令牌+拦截器+跨域】

登录相关功能的优化 登录后显示当前登录用户el-dropdown: Element - The worlds most popular Vue UI framework <el-dropdown style"float: right; height: 60px; line-height: 60px"><span class"el-dropdown-link" style"color: white;…

音视频开发 sdl库

介绍 SDL (Simple DirectMedia Layer) 是一个跨平台的开源多媒体库,它提供了底层访问多种硬件的接口,如音频、视频、输入设备等。它主要用于游戏开发,但也可用于其他类型的多媒体应用程序。下面是 SDL 的一些主要特点: 跨平台性: SDL 支持多种操作系统,包括 Windows、macOS、L…

HashMap中 put()方法的流程、扩容的思路(源码分析~)

文章目录 put() 方法的流程扩容流程为什么它会按照2的幂次方进行扩容呢&#xff1f; put() 方法的流程 下面我们通过分析源码来总结一下 put() 方法的流程 扩容流程 根据上图的分析&#xff0c;就可以总结出 HashMap 的扩容流程&#xff1a; 在插入元素时&#xff0c;会先…

C# 设计模式之原型模式

总目录 前言 在软件系统中&#xff0c;当创建一个类的实例的过程很昂贵或很复杂&#xff0c;并且我们需要创建多个这样类的实例时&#xff0c;如果我们用new操作符去创建这样的类实例&#xff0c;这未免会增加创建类的复杂度和耗费更多的内存空间&#xff0c;因为这样在内存中…

复现一下最近学习的漏洞(sqlab 1-10)

第一个问题&#xff1a;为什么不能用#来闭合单引号呢&#xff1f; 在进行URL地址栏传参的时候&#xff0c;是有一套编码规范的。他不会编码英文、数字和某些符号。但是#它会进行编码。也就是%23。&#xff08;先转ascii码&#xff0c;然后再转十六进制&#xff0c;之后加上%就是…

软甲测试定义和分类

软件测试定义 使用人工和自动手段来运行或测试某个系统的过程&#xff0c;其目的在于检验他是否满足规定的需求或弄清预期结果与实际结果之间的差别 软件测试目的 为了发现程序存在的代码或业务逻辑错误 – 第一优先级发现错误为了检验产品是否符合用户需求 – 跟用户要求实…

函数实例讲解(四)

文章目录 提取不重复值&#xff08;INDEX、MATCH、COUNTIF&#xff09;1、INDEX2、MATCH3、COUNTIF 提取不重复的值的经典套路&#xff08;LARGE、SMALL、ROW&#xff09;1、ROW2、LARGE3、SMALL&#xff09; 制作Excel动态查询表四舍五入函数(ROUND、ROUNDUP、ROUNDDOWN&#…

20240806 每日AI必读资讯

英伟达最强AI芯片曝重大设计缺陷&#xff0c;中国特供版意外曝光&#xff01; - 由于Blackwell GPU的设计缺陷&#xff0c;英伟达发货时间不得不推迟3个月 - GB200包含了2个Blackwell GPU和1个Grace CPU。问题出在连接2个Blackwell GPU的关键电路 - 意味着对于Meta、谷歌、微…

AI在医学领域:医学成像中针对深度神经网络(DNN)的对抗性攻击及其防御策略

关键词&#xff1a;对抗性攻击、医学图像、深度神经网络、模型安全、鲁棒性 机器学习&#xff08;ML&#xff09;是医学领域快速发展的一个分支&#xff0c;它利用计算机科学和统计学的方法来解决医学问题。众所周知&#xff0c;攻击者可能通过故意为机器学习分类器创建输入来…

VoNR网络架构与网元 IMS终端号码结构(VoLTE和VoNR适用)

目录 1. VoNR网络架构与网元 1.1 VoNR架构 vs VoLTE架构 1.2 回顾语音网络的演进与“分离” 1.3 TS23.228给出的5G的VoNR国际漫游 Home Routed 方案架构图 1.4 VoNR 网络架构图&#xff08;2022版&#xff09; 1.5 IMS 网元分类&#xff08;VoNR VoLTE 适用&#xff09…

LlamaIndex 实现 React Agent

React Agent 是指 LLM 对问题自行推理并调用外部工具解决问题&#xff0c;如下图所示&#xff0c;通过一些推理步骤最终找到想要的答案。 LlamaIndex 提供了实现 React Agent 的框架&#xff0c;通过框架可以轻松的实现上图中的步骤。那么&#xff0c;如果不用 LlamaIndex 应该…

【精选】6款一键生成论文的软件3000字论文网站

千笔-AIPassPaPer是一款功能强大且全面的AI论文写作工具&#xff0c;特别适合学术研究者和学生使用。它不仅能够一键生成高质量的论文初稿&#xff0c;还涵盖了700多个学科专业方向&#xff0c;满足各种学术需求。 一、千笔-AIPassPaPer 传送门&#xff1a;https://www.aipape…