记录学习时的问题：Vue Element-UI el-aside组件如果没有设置宽度会默认为300px

最新推荐文章于 2024-01-19 18:48:12 发布
最新推荐文章于 2024-01-19 18:48:12 发布
阅读量1.8k 收藏 2
点赞数 4
分类专栏： elementUI 文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36422171/article/details/107713796
版权

Vue Element-UI el-aside组件如果没有设置宽度会默认为300px

做导航菜单收缩/展开功能，发现导航菜单收缩后留了一大片空间，查看页面元素发现
有个宽度300px
导致收缩后的效果如下图
在这里插入图片描述
查看组件源码发现如果没有设置宽度，会默认300px
设置一下width: auto !important;解决此问题
在这里插入图片描述

璐先生9527
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue element响应式布局导航栏递归生成.el-submenu .el-menu-item里面出现min-width:200px样式穿透问题.
daishaochen的博客
09-27 1375
分析问题的原因：导航栏布局是采用element的响应式布局并且是封装成组件递归调用出来的下级导航栏，方便以后调用接口动态渲染导航栏。问题发现处：可以看出二级导航栏多出有点宽度，样式里面有一个min-width:200px。导航样式默认最小宽度200px。所以后面递归生成的子组件的宽度就成了200px.vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。解决办法：由于是递归生成的下级导航栏会出现样式穿透的问题。这样子后面的下级导航栏的宽度就可以改变了！
2021-11-21 vue笔记-PC端框架:Element-UI组件库(二) element-ui常用组件的介绍和使用
GAARA
11-21 796
零.回顾 一.基本组件 0.有哪些基本组件? 1.layout布局:通过基础的 24 分栏，迅速简便地创建布局 有哪些布局? 示例:使用row组件和col组件+span进行基础布局 2.container布局容器:用于快速布局的容器组件,用户按需求复制相关网页结构的代码 容器组件的基本结构 常见页面布局 第一种 第二种 第三种 第四种(常用) 第五种 示例:使用第四种布局 二.表单组件 1.有哪些表单组件? 2.form表单:有输入框,选择器,单选框,多选框等控件组成,用以手机,校验,提交数据 有哪些表单?
Vue修改elment-ui组件的el-aside的width
热门推荐
诗水人间
07-07 14万+
<el-aside width="200px" ref="aside" id="aside"> </el-aside> 会发现通过指定this.$ref.aside.style.width=auto或者指定值，会发现控制台直接报错，修改不生效。 换种做法将200px作为属性计算，进行双向绑定数据 <el-aside :width="200px" id="aside"> </el-aside> const vm = new Vue({ // 配置对象 opt
element+vue中页面布局el-aside怎么根据导航栏大小改他的宽
qq_45083002的博客
06-08 740
通过"width: unset;"去除他原来的300宽度他就会自动适用内部标签的大小。
element ui 去掉侧边栏默认宽度
sw_onload的博客
03-30 4815
使用element ui 的布局容器布局时，其侧边栏el-aside有默认宽度300px,但是由于要做侧栏导航菜单折叠与展开，所以侧边栏的宽度需随菜单的宽度变化而变化，就不能给el-aside设宽度，即给el-aside设width=null ...
【vue】解决中el-aside的width默认值300px问题
Aoba
09-08 7417
el-aside组件默认设置width为300px，想要点击折叠菜单后宽度仍然是300px，非常不方便。 点击取消width属性后 解决： 在代码中加上 width="auto" 即可，把width设置为自动随着菜单的折叠伸展宽度，如果宽度要求改为200px，改为 width="200px" ...
VUE Element-ui父组件与子组件相互调用
qq_25598453的博客
07-09 3978
1. 父组件代码 <template> <div> <!-- 栏目树状结构 --> <el-container> <el-aside width="200px"> <el-tree :data="columnTree" :props="defaultProps" node-key="id" show-checkbox ref="tree" accordion defau
笔记4：主页布局-侧边栏【Vue实战项目：电商管理系统（Element-UI）】
未来来
07-12 2351
文章目录1 整体布局2 完成主页-侧边栏2.1 实现基本的主页布局2.2 美化主页header区域2.3 实现导航菜单的基本结构2.4 通过axios拦截器添加token令牌2.5 获取左侧菜单数据2.6 通过for循环渲染左侧菜单2.7 优化右侧菜单展示2.8 实现侧边栏折叠与展开效果2.9 首页路由的重定向效果2.10 侧边栏路由链接改造 1 整体布局 2 完成主页-侧边栏 2.1 实现基本的主页布局 在 element ui 官网 上查找合适的布局容器 Home.vue <template
element-ui+vue-router:实现导航栏跳转路由
nahedan的博客
10-27 1万+
在实际开发中我们常常遇到在单页面中点击导航栏菜单中的某一选项卡，页面中的某个部分出现相关的信息，也就是使用导航栏进行路由跳转。如下图所示（在线格式转换）。 ### 示例 <el-menu :default-openeds="['1', '3']" :default-active="this.$route.path" router > <div class="icon"> <i class="el-icon-im
java入职学习六之前端UI（element-ui,ant-design-vue）
Yzq12312的博客
12-12 834
一、element-ui 1.简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为： 一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 效率
【已解决】取消 el-aside 默认宽度｜不再用 !important
bao
10-30 1101
就可以在 style 中修改 el-aside 宽度了。组件有 width props，默认为 300px。为空（不正确的css样式/写法）样式将会失效。
【vue+ElementUI】实现NavMenu侧边导航栏的手动缩放功能-类似表格缩放功能
wuchus的博客
07-24 5467
利用鼠标的mousedown、mouseup和mousemove事件实现ElementUI侧边栏的手动缩放功能。
vue2+element-ui,el-aside侧边栏容器收缩与展开
im_api的博客
02-16 6957
vue2+element-ui,el-aside侧边栏容器收缩与展开效果
vue项目网页自适应，等比例放大缩小
zxczero的博客
09-19 3万+
vue项目网页自适应，等比例放大缩小
关于ElementUI导航栏的常见问题（随时更新）
weixin_46021847的博客
06-13 4233
一、elementUI导航栏父级菜单只显示一半 原因： ElementUI采用Layout布局，是24分栏。 解决方法： <el-col :span="12"> //'12'改为'24'即可 <el-col :span="24"> 二、子菜单比父级菜单多1px 问题描述：代码是固定宽度200px，但是通过控制打印发现父级菜单只有199px，在控制台可以看到节点的class属性el-menu。 解决方法： <style scoped> .el-menu{
Vue/Element-ui动态调整左侧菜单栏高度
总结前端开发中遇到的问题，分享前端知识
08-25 5742
动态调整左侧菜单栏高度为全body高度，仅供参考 <el-container :style="containerHeight"> <el-scrollbar> <el-aside style="width:200px;"> .... </el-aside> </el-scrollbar> </el-container> ..
侧边栏的伸展与缩放
最新发布
m0_74060440的博客
01-19 737
侧边栏的手动拉伸
工作中element-ui组件遇到的问题
weixin_56678429的博客
04-23 685
el-aside组件中el-menu-item绑定点击事件出现下拉菜单自动收缩的问题解决方法问题描叙 解决方法 删除了el-menu组件中自带的 :default-openeds就解决了 问题描叙 我渲染了一个template绑定年份数据，el-menu-item绑定月份数据的下拉菜单： 绑定点击事件 ，先是在el-menu-item中绑定点击事件； 下拉菜单自动收缩，绑定点击事件后如果在事件里面做操作，下拉菜单就会自动收缩； 绑定事件不做操作 ，如果只是绑定点击事件，事件里面不做操作，下拉菜单就不会自动
Vue Element-UI el-aside组件永远有一个300px的width
CrazyOnes的博客
11-20 1万+
Vue Element-UI el-aside组件永远有一个300px的width 文章目录Vue Element-UI el-aside组件永远有一个300px的width问题发生问题描述问题排查解决方案和总结根本原因解决方案总结 问题发生 前端学艺不精，所以所写的前端代码层次也没有特别高，久闻Element-UI有布局相关的组件，但是从来没有使用过，最近写代码心血来潮，决定使用element-...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值