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

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

news 2025/8/18 16:56:12

解决右侧高度过高的问题

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

实现左侧菜单

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

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

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

简单优化

在这里插入图片描述

设置默认菜单项

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>