SpringBoot+Vue 03--项目搭建

最新推荐文章于 2025-12-08 22:08:33 发布

原创最新推荐文章于 2025-12-08 22:08:33 发布 · 662 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

22 篇文章

订阅专栏

本文档介绍了如何在Vue.js应用中使用Element UI组件库创建一个带有导航功能的侧边栏菜单。内容涵盖了自定义样式以去除边框，设置默认活动项，以及在不同状态下调整侧边栏的宽度和高度。同时，讨论了如何处理菜单的展开和关闭事件，以及在主内容区域添加表格并实现国际化。在实现过程中，遇到表格宽度自适应的问题，通过CSS计算属性解决了这个问题。此外，还添加了删除操作的按钮，并实现了分页功能。在调整按钮尺寸为small后，解决了宽度过长的问题。

清空页面，删掉没有用的东西

Header头部

在这里插入图片描述

App.vue

去掉边框：书写默认样式

main.js

Aside侧边栏

新建Aside.vue
写个div，写入element+里面的代码

<el-menu
        default-active="2"
        class="el-menu-vertical-demo"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item one</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="12">
      <h5 class="mb-2">Custom colors</h5>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @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 title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item one</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>

先不要 @open=“handleOpen”、@close="handleClose"这两个。
在这里插入图片描述
在App.vue中引入

调一下格式

修改侧边栏收起时候的宽度和高度

主体

删掉没有用的about.vue、在路由index.js里面也删掉about的路由
在这里插入图片描述
在home里粘贴表格代码

国际化设置，使表格内容变为中文

但是此时出现表格看度没有自适应的问题：

解决：在style里面style=“min-width:calc(100vw - 200px)”
调成了页面大小