python+vue3+onlyoffice在线文档系统实战20240726笔记,左侧菜单实现和最近文档基本实现

解决右侧高度过高的问题

解决方案:去掉右侧顶部和底部。

实现左侧菜单

最近文档,纯粹文档
我的文档,既包括文件夹也包括文件
共享文档,别人分享给我的

基本实现代码:
在这里插入图片描述

渲染效果:
在这里插入图片描述

简单优化

在这里插入图片描述

设置默认菜单项

const selectedKeys = ref(['latest']);

在这里插入图片描述

表格内容设计

参考腾讯文档:
在这里插入图片描述

name:文件名称
category:文档类型
author:作者
path:路径
latest_view_time:最近访问时间
size:文档大小

操作:

  • 编辑
  • 删除(只有作者能删除)
  • 分享(拥有权限能分享)

构造假数据

效果预览:
在这里插入图片描述

完整代码:

<script setup>
import {useRouter} from "vue-router";const router = useRouter()
const onOpenDocumentClick = () => {router.push({path: '/document', query: {key: 'abc'}})
}
const columns = [{title: '名称',key: 'name',dataIndex: 'name',},{title: '类型',key: 'category',dataIndex: 'category',},{title: '作者',key: 'author',dataIndex: 'author',},{title: '路径',key: 'path',dataIndex: 'path',},{title: '最近访问时间',key: 'latest_view_time',dataIndex: 'latest_view_time',},{title: '大小',key: 'size',dataIndex: 'size',},{title: '操作',key: 'action',},
];
const data = [{id: '1',name: 'test.docx',category: "doc", // doc/excel/pptauthor: "张三",path: "data/doc/test.docx",latest_view_time: "2024-07-26 12:33:33",size: 18889,},
];
</script>
<template><a-table :columns="columns" :data-source="data"><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'"><FormOutlined /> {{ record[column.key] }}</template><template v-else>{{ record[column.key] }}</template></template></a-table><!--<button @click="onOpenDocumentClick">打开文档</button>-->
</template>

遗留问题

引入自定义图标。

根据文件类型,渲染不同的图标。

点击文件夹,可能会出现很多个子文件夹。

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

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

相关文章

RT-Thread Studio搭建 Renesa Version Board开发环境

目录 概述 1 认识Version Board 1.1 Vision-Board简介 1.2 Vision-Board的资源 2 搭建Version Board开发环境 2.1 RT Thread Studio 2.2 安装SDK 3 开发环境验证 3.1 创建项目 3.2 编译和下载 概述 本文主要介绍使用RT-Thread Studio搭建 Renesa Version Board开发环…

c语言第四天笔记

关于 混合操作&#xff0c;不同计算结果推理 第一种编译结果&#xff1a; int i 5; int sum (i) (i) 6 7 13 第二种编译结果&#xff1a; int i 5; int sum (i) (i) 6 7 7 7 前面的7是因为后面i的变化被影响后&#xff0c;重新赋值 14 第一种编译结果&#xff…

Html+Css网页开发之动态登录页面(默认Chrome)

>>效果展示图<< 一、需求分析与设计要求 实现了一个动态背景图案的效果&#xff0c;包括一个白色的容器&#xff0c;内部有一个标题、一个输入框、一个按钮和一些文本。 背景是一个渐变色的线性渐变&#xff0c;而在容器的周围&#xff0c;有一些随机的方形和圆形图…

【CN】Argo 持续集成和交付(一)

1.简介 Argo 英 [ˈɑ:ɡəu] 美 [ˈɑrˌɡo] Kubernetes 原生工具&#xff0c;用于运行工作流程、管理集群以及正确执行 GitOps。 Argo 于 2020 年 3 月 26 日被 CNCF 接受为孵化成熟度级别&#xff0c;然后于 2022 年 12 月 6 日转移到毕业成熟度级别。 argoproj.github.i…

【数学建模】权重生成与评价模型(下)

文章目录 权重生成与评价模型&#xff08;下&#xff09;5. 模糊综合评价法5.1 模糊综合分析法的原理5.2 模糊综合分析法的案例 6. 秩和比分析法6.1 秩和比分析法原理6.2 秩和比分析法案例6.3 RSR的分布及其计算确定RSR的分布计算回归方程示例代码实现代码解释 6.4 秩和比分析法…

Godot入门 02玩家1.0版

添加Node2D节点&#xff0c;重命名Game 创建玩家场景&#xff0c;添加CharacterBody2D节点 添加AnimatedSprite2D节点 从精灵表中添加帧 选择文件 设置成8*8 图片边缘模糊改为清晰 设置加载后自动播放&#xff0c;动画循环 。动画速度10FPS&#xff0c;修改动画名称idle。 拖动…

【数据结构初阶】单链表经典算法题十二道——得道飞升(上篇)

目录 1、移除元素 2、反转链表 3、链表的中间节点 4、合并两个有序链表 Relaxing Time&#xff01;&#xff01;&#xff01; ———————————————— 天气之子幻 ———————————————— 1、移除元素 思路&#xff1a; 创建一个新链表&#xff0…

Open3D 获取点云中指定高度区域的所有点

目录 一、概述 1.1实现步骤 1.2应用 二、代码实现 1.1关键函数 1.2完整代码 三、实现效果 3.1原始点云 3.2处理后点云 Open3D点云算法汇总及实战案例汇总的目录地址&#xff1a; Open3D点云算法与点云深度学习案例汇总&#xff08;长期更新&#xff09;-CSDN博客 一、…

CentOS 7.x 的 YUM 仓库问题

背景 CentOS Linux 7 的生命周期&#xff08;EOL&#xff09;已经于 2024 年 6 月 30 日终止这意味着 CentOS 7.x 的官方镜像站点将不再提供服务&#xff0c;导致在使用 yum 安装或更新程序时可能会遇到 错误。本文将介绍如何解决这一问题&#xff0c;使得你可以继续在 CentOS…

【vim】ubuntu20-server 安装配置 vim 最新最详细

在编程的艺术世界里,代码和灵感需要寻找到最佳的交融点,才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里,我们将共同追寻这种完美结合,为未来的世界留下属于我们的独特印记。【vim】ubuntu20-server 安装配置 vim 最新最详细 开发环境一、vim github二、安装必…

Elasticsearch 使用误区之三——分片设置不合理

Elasticsearch 是一个强大的搜索和分析引擎&#xff0c;它通过将数据分散到多个节点的分片中来进行分布式处理。 本文将探讨分片大小和策略的概念&#xff0c;以优化 Elasticsearch 的性能并防止过度分片或分片过大等问题。 先看个分片设置不合理的真实企业案例&#xff1a; 10…

CSS:position属性

一、属性值 1.1 fixed 固定位置的元素&#xff0c;相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 网站中的固定 header 和 footer 就是用固定定位来实现的&#xff1b; header效果图 footer效果图 1.2 absol…

Linux系统安装Cobol语言及IBM大型机模拟软件Hercules

COBOL&#xff08;Common Business-Oriented Language&#xff09;起源于50年代中期&#xff0c;是一种面向过程的高级程序设计语言&#xff0c;主要用于商业和数据处理领域。经过不断发展和标准化&#xff0c;已成为国际上应用最广泛的商业编程语言之一&#xff0c;在某red书上…

Windows Server搭建局域网NTP时间服务器与客户端通实现

1.服务器环境&#xff1a; win11更改注册表 winR输入regedit win11更改注册表 winR输入regedit 2.HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Config&#xff0c;找到Config目录&#xff0c;双击Config目录下的AnnounceFlags&#xff0c;设为5。 3.HKEY_L…

Nginx 配置与优化:常见问题全面解析

文章目录 Nginx 配置与优化:常见问题全面解析一、Nginx 安装与配置问题1.1 Nginx 安装失败问题描述解决方法1.2 Nginx 配置文件语法错误问题描述解决方法二、Nginx 服务启动与停止问题2.1 Nginx 无法启动问题描述解决方法2.2 Nginx 服务无法停止问题描述解决方法三、Nginx 性能…

Http 和 Https 的区别(图文详解)

在现代网络通信中&#xff0c;保护数据的安全性和用户的隐私是至关重要的。HTTP&#xff08;Hypertext Transfer Protocol&#xff09;和 HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是两种常见的网络通信协议&#xff0c;但它们在数据保护方面的能力存在…

snkemake入门

一、背景介绍 snakemake是一种用于自动化流程的开源工具&#xff0c;是一款基于python3的软件。在生物信息学、高通量测序数据分析、大规模数据处理等领域非常流行。 snakemake的官网&#xff1a;Snakemake | Snakemake 8.16.0 documentationhttps://snakemake.readthedocs.i…

自监督学习概述(Self-Supervised Learning,SSL)

自监督学习&#xff08;Self-Supervised Learning&#xff0c;SSL&#xff09;是一种机器学习方法&#xff0c;旨在利用未标记数据进行训练。这种方法通过从数据本身生成伪标签&#xff0c;来创建监督信号&#xff0c;使得模型能够学习有效的数据表示。自监督学习在深度学习领域…

C++ | Leetcode C++题解之第283题移动零

题目&#xff1a; 题解&#xff1a; class Solution { public:void moveZeroes(vector<int>& nums) {int n nums.size(), left 0, right 0;while (right < n) {if (nums[right]) {swap(nums[left], nums[right]);left;}right;}} };

MathType 7.8中文直装版2024年最新图文安装破解教程

MathType公式编辑器 v7.8中文破解版是一款适用于Windows和Macintosh的便捷交互式公式编辑器&#xff0c;可帮助您进行文字处理、网页、桌面设计、演示文稿制作、学习TeX、LaTeX和MathML文档创建。 MathType 7.8这个工具允许用户创建、修改公式和插入多个文档。有了这个软件&…