企业做网站的,云南网站优化建站,做网站美工的前途怎么样,南通企业网站怎么建设解决右侧高度过高的问题
解决方案#xff1a;去掉右侧顶部和底部。
实现左侧菜单
最近文档#xff0c;纯粹文档 我的文档#xff0c;既包括文件夹也包括文件 共享文档#xff0c;别人分享给我的
基本实现代码#xff1a;
渲染效果#xff1a;
简单优化 设置默认菜…解决右侧高度过高的问题
解决方案去掉右侧顶部和底部。
实现左侧菜单
最近文档纯粹文档 我的文档既包括文件夹也包括文件 共享文档别人分享给我的
基本实现代码
渲染效果
简单优化 设置默认菜单项
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
templatea-table :columnscolumns :data-sourcedatatemplate #bodyCell{ column, record }template v-ifcolumn.key actiona-spacea-button编辑/a-buttona-button删除/a-buttona-button分享/a-button/a-space/templatetemplate v-else-ifcolumn.key nameFormOutlined / {{ record[column.key] }}/templatetemplate v-else{{ record[column.key] }}/template/template/a-table!--button clickonOpenDocumentClick打开文档/button--
/template
遗留问题
引入自定义图标。
根据文件类型渲染不同的图标。
点击文件夹可能会出现很多个子文件夹。
