标签搜索
隐藏侧边栏

【Vue3+Express实战-8】ElementUI改造课程管理系统页面布局

搞前端的半夏
2022-05-14 / 0 评论 / 0 点赞 / 58 阅读 / 1,275 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在上一节课程,我们使用Sequlize.findAll成功的查询了列表,本来这节实现来实现根据ID查询具体的课程的,但是因为后台收到好几个小伙伴的私信,希望我能改造页面的布局,使他更像一个管理系统,作为一个有求必应的UP主,我决定在本节课程讲讲如何使用Elementui来改造!

使用布局容器

打开Elementui官网,找到,示例,直接复制!!! 覆盖APP.vue 文件

https://element-plus.org/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80

image-20220514194908724

修改导航栏

官方示例给的是具有二级导航栏的示例,这里我们只需要一级。

改造如下:

  <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item index="1">
        <el-icon><icon-menu /></el-icon>
        <span><router-link to="/">首页</router-link> </span>
      </el-menu-item>
      <el-menu-item index="2" >
        <el-icon><document /></el-icon>
        <router-link to="/about">关于</router-link> 
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><setting /></el-icon>
        <router-link to="/tutorials"><span>课程列表</span></router-link>
      </el-menu-item>
    </el-menu>

<router-view />的位置

      <el-main>
        <el-scrollbar>
          <router-view />
        </el-scrollbar>
      </el-main>

image-20220514195453042

新增课程按钮

  <el-button>
    <router-link to="/add-tutorial">新增课程</router-link> </el-button
  >
0

评论区