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）！