【已解决】取消 el-aside 默认宽度｜不再用 !important

最新推荐文章于 2024-05-14 16:42:53 发布
最新推荐文章于 2024-05-14 16:42:53 发布
阅读量1k 收藏
点赞数
分类专栏： element-ui 文章标签： element el-aside
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40314318/article/details/134122511
版权

文章目录

问题原因

element-ui 的 el-aside 组件有 width props，默认为 300px

解决方法

给 el-aside 标签添加 width=""
width 为空（不正确的css样式/写法）样式将会失效。
在这里插入图片描述
就可以在 style 中修改 el-aside 宽度了。 (不使用 !important 的情况下）

在这里插入图片描述

我看刑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
vue2+element-ui,el-aside侧边栏容器收缩与展开效果
angular-aside：关闭画布侧面菜单以与ui-bootstrap一起使用
01-31
关闭画布侧面菜单，可与ui-bootstrap 0.14+一起使用。 扩展ui-bootstrap的$uibModal提供程序。 :person_tipping_hand: 请对ui-bootstrap版本0.13及更低版本使用v1.2.x。 安装 凉亭： $ bower install angular-...
【vue】解决中el-aside的width默认值300px问题
Aoba
09-08 7059
el-aside组件默认设置width为300px，想要点击折叠菜单后宽度仍然是300px，非常不方便。 点击取消width属性后 解决： 在代码中加上 width="auto" 即可，把width设置为自动随着菜单的折叠伸展宽度，如果宽度要求改为200px，改为 width="200px" ...
element el-aside 菜单充满左侧全部 去掉菜单自带的有边框
小小爪哇工程师的博客
01-15 513
【代码】element el-aside 菜单充满左侧全部 去掉菜单自带的有边框。
ElementUI框架el-aside组件实现拖拽改变宽度
最新发布
foloch0的博客
05-14 327
【代码】ElementUI框架el-aside组件实现拖拽改变宽度。
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-...
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 669
通过"width: unset;"去除他原来的300宽度他就会自动适用内部标签的大小。
element中el-container容器与div布局区分详解
11-20
el-aside：侧边栏容器。 el-main：主要区域容器。 el-footer：底栏容器。 以上组件采用了 flex 布局，elemen-ui官方文档链接： http://element-cn.eleme.io/#/zh-CN/component/container 此外，el-container 的子...
Vuejs通过拖动改变元素宽度实现自适应
01-19
拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；...
flexmark-ext-aside-0.42.8.jar
02-24
java运行依赖jar包
vue项目--问题解答整理（持续更新中......）
m0_46457497的博客
03-12 541
在club-vue文件下右击—>Git Bush —>git clone xxxxxx(此步只需要第一次连接远程仓库的时候使用就可以了) —>git add . —> git commit - m “上传说明注释”—> git push。所以所有页面都是显示在app.vue的标签router-view上的，故app.vue的所有操作作用于任一vue页面。>：任何css标签当加上scoped的时候，标签里面的css只作用于当前组件，相当于标签加上了唯一标识。所有的页面都是在app.vue中进行切换的。
JS实现模态框拖拽
cyj5201314的博客
04-18 295
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模态框拖拽&l
element ui 去掉侧边栏默认宽度
sw_onload的博客
03-30 4739
使用element ui 的布局容器布局时，其侧边栏el-aside有默认宽度300px,但是由于要做侧栏导航菜单折叠与展开，所以侧边栏的宽度需随菜单的宽度变化而变化，就不能给el-aside设宽度，即给el-aside设width=null ...
Vue+ELementUI主页布局----侧边栏布局（el-aside）
weixin_51351637的博客
10-04 3万+
第一节Login.vue登录表单知识： Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址：Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token，保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开
vue3 伸缩菜单组件
m0_58565372的博客
01-04 2029
3.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navHeader文件，在navHeader文件下创建index.vue文件。4.在components下面创建一个container的文件，在container文件下面创建一个src文件，然后在src文件下创建navSide文件，在navSide文件下创建index.vue文件。2.在router文件下的index.ts写入。以上就是封装伸缩菜单栏组件的代码。
elementui 自定义样式没生效
沉睡的博客
12-18 648
elementui 自定义样式没生效 例如有一个tab <el-aside width="320px" class="meeting-setting-tabs"> <el-tabs type="card" class="lz-padding-top-20"> <el-tab-pane label="当前元素">用户管理<...
怎么控制el-aside的宽度
06-10
你可以使用 CSS 来控制 el-aside 的宽度。具体方法有以下几种： 1. 使用内联样式：直接在 el-aside 标签内部使用 style 属性指定宽度，例如：`<el-aside style="width: 200px;"></el-aside>` 2. 使用类选择器：在 CSS 中定义一个类，然后将该类应用到 el-aside 标签上，例如：`.my-aside { width: 200px; }`，然后在 HTML 中使用 `<el-aside class="my-aside"></el-aside>`。 3. 使用 ID 选择器：在 CSS 中定义一个 ID，然后将该 ID 应用到 el-aside 标签上，例如：`#my-aside { width: 200px; }`，然后在 HTML 中使用 `<el-aside id="my-aside"></el-aside>`。 需要注意的是，如果同时使用了类选择器和 ID 选择器来设置 el-aside 的宽度，ID 选择器的优先级更高，会覆盖类选择器的设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值