成都专做婚介网站的公司seo外链论坛
解决右侧高度过高的问题
解决方案：去掉右侧顶部和底部。
实现左侧菜单
最近文档，纯粹文档
我的文档，既包括文件夹也包括文件
共享文档，别人分享给我的
基本实现代码：
渲染效果：
简单优化
设置默认菜单项
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>遗留问题
引入自定义图标。
根据文件类型，渲染不同的图标。
点击文件夹，可能会出现很多个子文件夹。