Element-plus菜单组件侧栏无法铺满屏幕

最新推荐文章于 2024-05-28 16:02:54 发布

Victor_evol

最新推荐文章于 2024-05-28 16:02:54 发布

阅读量353

点赞数

文章标签： vue elementui html

本文链接：https://blog.csdn.net/m0_52137630/article/details/134953510

版权

问题描述

教务系统主页需要用到Element-plus的Menu组件，但aside的高度是根据内容高度自动的

网上查了各种方法，手动设置所有父组件高度100%仍然不行

解决方案：

<el-menu style="height: 87.5vh;"></el-menu>

只需要设置一个以vh为单位的固定高度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Victor_evol

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element-plus菜单组件侧栏无法铺满屏幕

教务系统主页需要用到Element-plus的Menu组件，但aside的高度是根据内容高度自动的
复制链接

扫一扫

ios-简易侧栏菜单.zip

07-11

综上所述，"ios-简易侧栏菜单.zip"中的`DWMenus`是一个可能的侧栏菜单解决方案，开发者可以通过学习和集成这个组件，快速在自己的iOS应用中实现类似的功能。在实际开发中，理解其工作原理，结合具体需求进行定制和...

安卓SlidingMenu各种菜单侧滑菜单相关-BorderMenu特别的侧栏菜单库.rar

07-29

在Android应用开发中，侧滑菜单（SlidingMenu）是一种常见的设计模式，它允许用户通过从屏幕边缘向内滑动来展示或隐藏一个侧边栏，通常包含导航选项或者设置。这种交互方式使得用户能够在不离开当前界面的情况下访问...

参与评论您还未登录，请先登录后发表或查看评论

element-plus容器布局充满全屏

m0_60540731的博客

12-04

1475

element-plus解决占据半屏问题

解决element-plus侧边栏组件el-menu不占满可视窗高度的问题

qq_44886882的博客

07-27

4380

解决element-plus侧边栏组件el-menu不占满可视窗高度的问题。

vue3-elementPlus 全屏小组件

最新发布

qq_41038412的博客

05-28

496

Vue3+elementPlus封装的全屏小组见，简单易用

Vue中使用element-ui的menu高度撑满屏幕

xvzhengyang的博客

04-21

6136

<template> <el-container class="el-container"> <el-aside width="200px" class="el-aside-container"> <el-menu @select="handleSelect" active-text-color="#367fff" class="el-menu-container" text-.

使用elementui做后台管理系统，el-aside(el-menu)与el-main高度不一的问题，实现el-aside(el-menu)占满整个页面，以及实现多级菜单。

qq_51758070的博客

08-23

6945

先来看看问题1：（实现el-menu占满整个页面）这是el-menu没有设置高度出现的问题这是将el-menu这块高度设置为100vh，出现的问题最后，解决问题，如图在App.vue中，添加以下代码在布局文件中，也就是在以下文件中，给container类添加戴拿最后，也就是在el-main里面，即TabInner里面添加以下代码问题2：实现多级菜单做法：遍历从父组件传过来的menuData数组数据（菜单栏数据），如果数据里有children属性，则建立一个父级菜单名，并再次循环去判断

element-plus中菜单组件基本使用（多级菜单）

qq_57076435的博客

08-13

1775

el-menu-item></el-menu-item>:一级菜单。<el-sub-menu></el-sub-menu>:多级菜单。一般el-menu包在一个template标签中去遍历。

vue3+elementplus为什么UI显示很小

CXDarkness的博客

03-08

423

我的elementplus显示异常

element 项目全屏功能

greed

09-04

1936

全屏功能安装插件 npm i screenfull 全屏组件的封装 <template>  <div style="display:inline-block" @click="hClick"> <svg-icon :icon-class="isScreenFull ? 'exit-fullscreen': 'fullscreen'" class="fullscreen" /> </div&g

Element-ui之ElScrollBar组件滚动条的使用方法

12-01

在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。使用的原因：原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这...

android-menudrawer-master开源强大侧栏菜单

12-31

Android上的菜单展示风格各异，其中用得最多且体验最好的莫过于左右滑动来显示隐藏的菜单，android-menudrawer是一个滑动式菜单实现，允许用户在应用当中实现无缝导航。该项目具有多种菜单展示效果，其中最常见的...

vue+ElementPlus框架Container 布局容器不能铺满整个屏幕

enjoyenjoy576423146的博客

04-10

5789

直接使用ElementPlus框架的Container 布局容器，在页面中没有铺满，查看可知，有padding20px，高度也只有一半，因此添加了scc。

Vue3 实现全屏方法

frewtyh的博客

08-08

1702

浏览器自带全屏方法 document.documentElement.requestFullscreen()，和退出全屏方法document.exitFullscreen()，判断是否全屏document.fullscreenElement如果不是全屏返回null。1.定义全屏按钮，这里事引用了element-plus框架。2.定义执行的回调函数。

一个样式解决element-ui侧边栏组件el-menu占不满屏幕的问题

e274426380的博客

09-23

5894

网上解决这个问题的方法都非常麻烦，比如加很多很多高度100%，而有些人又没法复现这种成功。在这里分享一个新属性给大家试试，非常有效 height:100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， https://blog.csdn.net/qq_16687863/article/details/100516013 但是设置height:100vh，该元素

解决Vue+Element UI 使用el-aside时菜单栏无法撑起整个侧边栏高度,解决点开菜单栏时有部分突起问题。

qq_59390336的博客

11-27

3387

解决Vue+Element UI 使用el-aside时菜单栏无法撑起整个侧边栏高度,解决点开菜单栏时有部分突起问题。

解决Element-Plus使用了布局容器后，侧边栏高度设置100%却没有撑开高度

weixin_61769998的博客

10-18

2100

解决Element-Plus使用了布局容器后，侧边栏高度设置100%却没有撑开高度

解决element-ui侧边菜单栏高度占满屏幕

热门推荐

starstarss的博客

03-10

3万+

element-ui侧边导航栏高度占满屏幕前端小白第一份博客上线 element-ui 最近写项目，有一个界面用element导航栏组件写了侧边栏，如图但是发现这个侧边栏（红色区域）的高度，是动态的，也就是说有多少条数据就显示多少只有两三条的时候就是上图所示，如果是很多条的话，高度就会自动撑开但是这样界面看起来很突兀，我想要的是，高度一直占满屏幕，多条菜单数据的话，在内部形成滚动条，如下...

Vue3使用Element-Plus + TypeScript的Container组件宽度不自动撑满

weixin_44517249的博客

03-17

1071

页面宽度不撑满屏幕

element-plus 菜单

10-13

好的，你的问题是： element-plus 菜单怎么使用？回答： element-plus 的菜单组件是 `el-menu`，使用时需要先引入组件： ```vue <template> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template #title>我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> </template> <script> import { ElMenu, ElMenuItem, ElSubmenu } from 'element-plus'; export default { components: { ElMenu, ElMenuItem, ElSubmenu, }, data() { return { activeIndex: '1', }; }, methods: { handleSelect(index) { this.activeIndex = index; }, }, }; </script> ``` 在上面的代码中，我们使用了 `el-menu`、`el-menu-item` 和 `el-submenu` 三个组件来构建菜单。其中，`el-menu` 是菜单的容器，`el-menu-item` 是菜单项，`el-submenu` 是子菜单。我们可以通过 `default-active` 属性来设置默认选中的菜单项，通过 `mode` 属性来设置菜单的模式（水平或垂直），通过 `@select` 事件来监听菜单项的选中事件。