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/ppt
author: "张三",
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>
遗留问题
引入自定义图标。
根据文件类型,渲染不同的图标。
点击文件夹,可能会出现很多个子文件夹。
原文地址:https://blog.csdn.net/qq_37703224/article/details/140725265
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!