解决Element-ui中侧边栏最常出现的小问题

最新推荐文章于 2024-08-11 17:33:21 发布
最新推荐文章于 2024-08-11 17:33:21 发布
阅读量4.2k 收藏 14
点赞数 10
分类专栏： css样式 vue html 文章标签： html css javascript html5 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oilpastell/article/details/108049937
版权
vue 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
html
13 篇文章 0 订阅
订阅专栏
css样式
12 篇文章 0 订阅
订阅专栏

1. 解决侧边导航栏收缩后，右侧内容不能一起收缩的问题

在这里插入图片描述
解决方法：修改width属性值
在这里插入图片描述

2. 解决侧边导航栏不能平铺整个页面

在这里插入图片描述
解决方法：给导航栏最小高，单位用vh
在这里插入图片描述

这里补充vh vw的用法
vh：相当于浏览器的高度
vw：相当于浏览器的宽度
例如：calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小

oilpastell
关注
  • 10
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue + element ui 实现侧边栏导航栏折叠收起
爱敲代码的卡拉米的博客
07-08 773
通过 row 和 col 组件，并通过 col 组件的。属性我们就可以自由地组合布局。
ElEmentUI选择器弹出框定位错乱问题解决(弹出框出现在左上角)
kodmoqn的博客
05-09 2637
ElEmentUI选择器弹出框定位错乱问题解决(弹出框出现在左上角)
Element UI左侧导航栏写法（递归组件实现）
最新发布
m0_62626838的博客
08-11 245
1、左侧导航栏组件使用的是Element Ui的导航栏组件，思路：首先判断导航栏数据是否存在children，以此来实现一级菜单与多级菜单的渲染，然后使用递归组件实现多级菜单的子菜单渲染，注意使用递归组件需将菜单栏数据在父组件中从vuex中获取，再通过props传递给子组件，否则会陷入无限递归。
解决 elementUi 侧边栏折叠后图标不显示或者文字不消失问题
DDDHL_的博客
03-01 8915
elementUi 侧边栏折叠后图标不显示或者文字不消失问题
【vue+ElementUI】实现NavMenu侧边导航栏的手动缩放功能-类似表格缩放功能
wuchus的博客
07-24 5465
利用鼠标的mousedown、mouseup和mousemove事件实现ElementUI侧边栏的手动缩放功能。
关于ElementUI导航栏的常见问题（随时更新）
weixin_46021847的博客
06-13 4230
一、elementUI导航栏父级菜单只显示一半 原因： ElementUI采用Layout布局，是24分栏。 解决方法： <el-col :span="12"> //'12'改为'24'即可 <el-col :span="24"> 二、子菜单比父级菜单多1px 问题描述：代码是固定宽度200px，但是通过控制打印发现父级菜单只有199px，在控制台可以看到节点的class属性el-menu。 解决方法： <style scoped> .el-menu{
element-ui组件 el-menu导航菜单边缘不对齐
qq_44886882的博客
08-27 2685
记录element-ui组件中el-menu导航菜单使用中遇到的边缘不对齐的问题以及解决思路和办法。
element ui 去掉侧边栏默认宽度
sw_onload的博客
03-30 4815
使用element ui 的布局容器布局时，其侧边栏el-aside有默认宽度300px,但是由于要做侧栏导航菜单折叠与展开，所以侧边栏的宽度需随菜单的宽度变化而变化，就不能给el-aside设宽度，即给el-aside设width=null ...
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
在Vue2和Element-UI框架下，开发一个具备el-aside侧边栏容器收缩与展开功能的应用是一项常见的任务。Element-UI是基于Vue2的组件库，提供了丰富的UI组件，其中包括el-aside，用于创建侧边栏布局。下面将详细阐述实现...
Element-UI 侧边栏高亮
qq_44706779的博客
02-18 1830
Element-UI 侧边栏高亮一、出现场景二、解决办法1. F5 刷新高亮问题2. 前进后退后高亮不同步问题 一、出现场景 在使用 Element-UI 的侧边导航栏时我遇到了两个问题： 按 F5 刷新页面后，导航栏默认折叠起来，并且无高亮显示 点击浏览器的前进后退按钮后，高亮显示与页面内容不同步 下面我就这两个问题给出自己的解决办法。 二、解决办法 1. F5 刷新高亮问题 原理：当地址栏发生变化时，修改改变默认显示高亮的值。 首先给导航栏加上 default-active 属性，记得加上冒号。
Element-UI快速入门
热门推荐
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
element-ui 实现响应式导航栏的示例代码
10-15
在本文中，我们将深入探讨如何使用Element UI框架实现响应式导航栏。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI元素，用于快速构建美观的前端界面。然而，它默认并不提供传统的顶部导航栏组件，因此...
vue-element-admin：基于vue，element-ui的后台系统，包含侧边栏权限过滤等常用组件
02-05
vue-cli + element-ui后台开发项目本项目不适合作为后台模板使用，仅作为后台解决方案的一种本方案模板页： 本地使用 // download files git clone https: //github.com/BiYuqi/vue-element-admin.git cd vue - ...
解决Element UI中NavMenu 折叠菜单的坑
浮生醉清风
10-18 3741
在使用Element ui里NavMenu折叠菜单的时候 会遇到侧边导航栏收缩后，右侧内容不能一起收缩的问题和侧边栏折叠的卡顿一下的问题，下面让我们一起解决一下吧。
Vue结合element-ui实现导航菜单展开收缩小功能
m0_51431448的博客
09-05 7876
首先是布局，这就是个很经典的后台管理系统的容器页面，这里分为上下结构，上面一般放些系统logo、登录的用户信息，还有一些小功能等等。然后下面又分为左右结构，左边就是我们的导航菜单，右边那一块儿是我们将来所有的业务页面存放的地方
element使用菜单收起折叠，发现aside不随折叠宽度而变化,收起后文字不隐藏，子菜单突出解决方案
CHENC0518的博客
04-12 1993
1.只需要为el-side添加 即可解决。
解决element-ui侧边菜单栏高度占满屏幕
starstarss的博客
03-10 3万+
element-ui侧边导航栏高度占满屏幕 前端小白第一份博客上线 element-ui 最近写项目，有一个界面用element导航栏组件写了侧边栏，如图 但是发现这个侧边栏（红色区域）的高度，是动态的，也就是说有多少条数据就显示多少 只有两三条的时候就是上图所示，如果是很多条的话，高度就会自动撑开 但是这样界面看起来很突兀，我想要的是，高度一直占满屏幕，多条菜单数据的话，在内部形成滚动条，如下...
【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台（中）
十八岁讨厌编程的博客
11-03 7161
本文涉及：使用Vuex实现左侧菜单栏的折叠、Home组件的实现、Echarts基本使用、对axios的二次封装、使用mockjs完成数据模拟等内容。
element-ui侧边栏点击事件
03-28
在Element-UI中，侧边栏的点击事件可以通过使用路由来实现。当侧边栏的某个菜单项被点击时，可以通过路由跳转到相应的页面或执行相应的操作。 首先，你需要在侧边栏组件中定义菜单项，并为每个菜单项添加点击事件。例如： ```html <template> <div> <el-menu> <el-menu-item @click="handleClick('home')">首页</el-menu-item> <el-menu-item @click="handleClick('about')">关于</el-menu-item> <el-menu-item @click="handleClick('contact')">联系我们</el-menu-item> </el-menu> </div> </template> ``` 然后，在组件的methods中定义点击事件的处理函数。这个处理函数可以根据点击的菜单项的标识来执行相应的操作，比如跳转到对应的路由页面。 ```javascript <script> export default { methods: { handleClick(menuItem) { if (menuItem === 'home') { // 执行跳转到首页的操作 this.$router.push('/home'); } else if (menuItem === 'about') { // 执行跳转到关于页面的操作 this.$router.push('/about'); } else if (menuItem === 'contact') { // 执行跳转到联系我们页面的操作 this.$router.push('/contact'); } } } } </script> ``` 这样，当侧边栏的菜单项被点击时，会触发相应的点击事件处理函数，根据菜单项的标识来执行相应的操作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值