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}
}
相关文章:
zdpy+vue3+onlyoffice文档系统实战上课笔记 20240805
上次 上次计划 1、最近文档表格完善 2、实现登录功能 3、新建文件,复制文件,删除文件 4、其他 目前任务:最近文档表格完善 1、在名称前面,渲染这个文档的图标 2、大小的基本的单位是kb,超过1024kb则换成mb࿰…...
【Linux 从基础到进阶】Linux 内核参数调优
Linux 内核参数调优 引言 内核参数调优是提升 Linux 系统性能和稳定性的重要手段。通过合理配置和优化内核参数,可以显著改善系统资源利用率和响应速度。本文将介绍内核参数的调优方法,并提供适用于 CentOS 和 Ubuntu 系统的具体示例。 1. 内核参数简介 内核参数是控制 L…...
【Java数据结构】---泛型
乐观学习,乐观生活,才能不断前进啊!!! 我的主页:optimistic_chen 我的专栏:c语言 ,Java 欢迎大家访问~ 创作不易,大佬们点赞鼓励下吧~ 文章目录 包装类装箱和拆箱泛型泛型…...
Java Lambda表达式总结(快速上手图解)
Java Lambda表达式总结(快速上手详解)-CSDN博客https://blog.csdn.net/m0_66070037/article/details/140912566?spm1001.2014.3001.5501...
【算法模板】图论:Tarjan算法求割边割点
概念 割边(Bridge 或 Cut Edge) 定义: 在一个无向连通图中,如果删除某条边后,图不再连通(即任意两点之间不能相互到达),则称该边为割边。割边也被称为桥,因为它像桥梁…...
如何在IDEA上使用JDBC编程【保姆级教程】
目录 前言 什么是JDBC编程 本质 使用JDBC编程的优势 JDBC流程 如何在IEDA上使用JDBC JDBC编程 1.创建并初始化数据源 2.与数据库服务器建立连接 3.创建PreparedStatement对象编写sql语句 4.执行SQL语句并处理结果集 executeUpdate executeQuery 5.释放资源 前言 在…...
linux web系统安装常见问题解决,租房系统为案例
Warning: require(): open_basedir restriction in effect. 一、执行文件权限 网站目录下 open_basedir增加执行路径 二、文件夹权限放行 三、安装基础环境 composer install 四、数据合并 php think migrate:run 20200402094148 AdminUser: migrating 20200402094148 A…...
Linux驱动开发—平台总线模型详解
文章目录 1.平台总线介绍1.1平台总线模型的组成部分1.2平台总线模型的优势 2.使用平台总线模型开发驱动2.1注册platform设备2.2注册platform驱动2.3效果演示 1.平台总线介绍 Linux 平台总线模型(Platform Bus Model)是一种设备驱动框架,用于…...
说一下网络层,传输层,数据链路层做什么的,之间的关系?
网络层主要负责为数据包选择最佳路径,将数据从源主机传输到目标主机。它的关键任务包括路由选择、拥塞控制和网络互联等。通过网络层的功能,不同网络之间能够实现通信和数据传输。 传输层的作用是在源端和目的端之间提供可靠或不可靠的端到端的数据传输…...
解锁AI新纪元:Milvus Cloud与Zilliz Cloud的高可用之道
在当今数字化时代,系统的持续稳定运行与数据的即时访问性已成为衡量技术服务质量的关键指标。面对复杂多变的运行环境,包括电力波动、网络故障乃至人为操作失误等不可预见因素,数据库系统的高可用性(High Availability, HA)成为了保障业务连续性的重要基石。特别是在大数据…...
svn安装
579 yum install subversion 580 rpm -qa|grep subversion 581 yum -y install subversion 582 rpm -ql subversion 583 /usr/bin/svnversion --version 584 mkdir /data/svnrepos 585 svnadmin create /data/svnrepos/abc 586 svnadmin create /data/svnrepos/gzss 587 cd…...
【隐私计算篇】混淆电路之深入浅出
入门隐私计算的阶段,一般都会涉及对于混淆电路的学习,这是因为混淆电路是多方安全计算中的基础密码原语,也是隐私保护中重要的技术。为了帮助更好地理解混淆电路的原理,今天对其进行原理以及相关优化手段进行解析和分享。 1. 混淆…...
基于GRU神经网络的微博分类预测
目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 gru的原理 GRU神经网络微博分类 结果分析 展望 参考论文 背影 传统的方法微博分类预测准确率低,为提高精度,本文用gru进行预测 摘要 LSTM原理,GRU原理,MATALB编程gru的微博分类预测 LSTM的基本定义 LSTM是一种含有LST…...
LVS-DR模式集群:案例与概念
DR模式(直接路由) 概念 Direct Routing,简称DR模式采用半开放式的网络结构,与TUN模式的结构类似,但内网服务器并不是分散在各地,而是与调度器位于同一个物理网络负载调度器与内网服务器通过本地网络连接&a…...
拓扑排序:Kahn算法与DFS算法
引言 拓扑排序是有向无环图(DAG)中的一种线性排序,使得对于图中的每一条有向边 ( u \rightarrow v ),顶点 ( u ) 在排序中出现在顶点 ( v ) 之前。本文将详细介绍两种实现拓扑排序的算法:Kahn算法和基于深度优先搜索&…...
图像处理 -- Sobel滤波器的实现原理与使用案例
Sobel滤波器 概述 Sobel滤波器是一种边缘检测方法,用于图像处理和计算机视觉领域。它通过计算图像灰度值的梯度来检测边缘。Sobel滤波器结合了高斯平滑和微分操作,以减少噪声并增强边缘检测效果。 实现原理 Sobel滤波器通过使用两个3x3卷积核&#x…...
机器学习 第10章-降维与度量学习
机器学习 第10章-降维与度量学习 10.1 k近邻学习 k近邻(k-Nearest Neighbor,简称kNN)学习是一种常用的监督学习方法其工作机制非常简单:给定测试样本,基于某种距离度量找出训练集中与其最靠近的k个训练样本,然后基于这k个“邻居”的信息来进行预测。通…...
linux驱动:(7)物理地址到虚拟地址映射
单片机、裸机、linux操控硬件方法 在单片机和裸机中操作硬件是通过指针来对寄存器赋值来进行操控 但对于linux中不能这样,不能直接对物理地址直接修改,因为linux使能了mmu,所以不能直接菜操作物理地址 如果要操作硬件,需要先把…...
浏览器用户文件夹详解 - Preferences(十)
1.Preferences简介 1.1 什么是Preferences文件? Preferences文件是Chromium浏览器中用于存储用户个性化设置和配置的一个重要文件。每当用户在浏览器中更改设置或安装扩展程序时,这些信息都会被记录在Preferences文件中。通过这些记录,浏览…...
Robot Operating System——电池电量通知
大纲 应用场景定义字段解释 案例 sensor_msgs::msg::BatteryState 是 ROS 2 中定义的消息类型,用于表示电池状态。它包含了电池电量、电压、电流、温度等信息。 应用场景 机器人 电池监控:在移动机器人中,电池是主要的电源。BatteryState 消…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
