Django5+Vue3:OA系统前后端分离项目实战-Frame页面框架搭建(14)

Django5+Vue3系列文章

前言

本节开始，全文仅对会员开放。

若点赞和收藏数量超过100，全文将免费开放。

此项目采用 Django 框架的 5.0.7 版本进行开发。

Django 5.0 支持的 Python 版本为 3.10、3.11 和 3.12。

OA 系统系列文章将持续更新，直至项目的 Docker 部署阶段。

专栏链接:  ~快捷传送门: 留个赞再走呗😭! ~

个人博客: ~所有文章尽在简客免费阅读~

文章目录

目录

Django5+Vue3系列文章

前言

文章目录

一、Frame效果展示

二、选择组件

1.常见页面布局

2.Collapse 折叠面板

三、代码实现

四、ElementsPlus

总结

一、Frame效果展示

 参考链接：~ElementPlus：点个赞再走呗😭~​

Frame页面结构展示：

二、选择组件

1.常见页面布局

官网代码如下（示例）：

    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

2.Collapse 折叠面板

官网代码如下（示例）：

  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template