去除element-ui中 el-main的滚动条

已于 2023-08-20 20:08:20 修改
阅读量698 收藏 1
点赞数 2
文章标签： css3 html5 elementui
于 2023-08-07 13:28:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56063262/article/details/132144414
版权

 在网上查看半天都没一个人说到重点，坑踩的死死。最后终于自己找到原因！！！！

直接修改样式就行

overflow：auto  表示如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

重整旗鼓的程序猿
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条
高级前端工程师
03-27 5196
element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去
Vue - 完美解决 Element UI 侧边导航菜单 ＜el-menu＞ 出现滚动条，去掉 Element 侧边导航组件的横纵滚动条（但滚动功能依然保留，仅仅是去掉 “滚动条“）100% 解决方案
王佳斌
03-27 6901
vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条 如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去除的滚动条，element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜
固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条
u010616779的博客
09-25 416
【代码】固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条。
去除el-main滚动条
m0_50923870的博客
08-25 237
在el-main内添加该属性。
【实战】element布局容器中的el-main内容高度自适应，内容超出就出现滚动条
Shids_的博客
07-08 3736
【实战】element布局容器中的el-main内容高度自适应，内容超出就出现滚动条
element ui el-cascader 消除滚动条
liubangbo的专栏
07-06 3335
用el-cascader 组件时出现了滚动条，如下图所示：网上说加上全局样式就可以了（不要加scoped），如下： 试了一下效果如下： 样式生效了，横向滚动条消失了，但效果还是不行，好像还不如之前。看了一下element ui 给级联选择器加的样式，如下：加了style, margin-bottom, margin-right 这个样式就是为了滚动条而设置的，既然不需要滚动条了，这个样式也得把它去掉： 这样就可以了。效果如下： perfect！...
elementUI 表格组件设置高度之后去除滚动条
qq_34453435的博客
08-31 525
elementUI 表格组件设置高度之后去除滚动条
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
element-ui.rar element-ui核心库压缩包
12-20
安装完成后，需要在 Vue 的入口文件（如 main.js）中引入 Element UI 并使用它： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; ...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
ElementUI 表格表头筛选框的高度设置，超出一定高度，显示滚动条
weixin_34372728的博客
03-05 1258
最近项目发现一个问题table表头筛选的时候，由于筛选内容过多导致弹出框超出屏幕，并且无法滚动，应急的办法是缩小浏览器显示比例让更多内容显示
element table组件实现保留横向滚动条，去除纵向滚动条
二三的博客
12-04 5092
实现仅去除纵向滚动条效果 项目开发中，有这样一个需求：实现表格内容自动滚动，去掉纵向滚动条。 代码如下所示： ::v-deep ::-webkit-scrollbar { width: 0; height: 0; } 这种写法确实实现了去掉了纵向滚动条的效果，不过对于我的项目来说，却存在一些问题：因为我的表格的表头是可以动态控制的，所以当默认展示的时候，表格横向宽度足够，不存在滚动条的现象；但当表头全部展示的时候，右侧部分内容展示不出来。因为上面的css代码是将横向以及纵向的滚动条全部给去除了，
element-plus的默认样式怎么去除
cf_xyn151886的博客
10-02 507
前几天看见element-ui，vue2上面去除默认样式用>>>，比如.current-font >>> .el-breadcrumb__inner。后来，在vue3上我也用.current-font >>> .el-breadcrumb__inner发现。其实就是将.current-font >>> .el-breadcrumb__inner换成:deep(.title)就可以了，.title是你当前的样式。
（亲测有效）固定顶部 el-header + 左侧 el-aside 滚动条 + 主体 el-main 滚动条
热门推荐
Rose✿留白ق೨的博客
12-19 1万+
在elementui官网复制Container 布局容器布局，代码如下： <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-co
一行代码解决Element UI Container 布局容器中 头部和侧边栏固定 el-main可滚动
weixin_42539854的博客
03-11 2891
布局 <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> 方案 **只需要给内容区域的contain
Vue 前端页面多个滚动条 去掉el-main滚动条
m0_46664744的博客
01-11 1755
Vue 前端页面多个滚动条 去掉el-main滚动条
拖拽上传（预览图片）
最新发布
喵喵的博客
07-18 536
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
scoped中更改el-main背景色不生效
09-22
### 回答1： 你好！ 在 `scoped` 中更改 `el-main` 的背景色不生效的原因可能有很多，具体的原因只有了解到项目的具体情况才能确定。 这里列出一些可能导致这种情况的原因： 1. 你的 CSS 规则可能被覆盖了。检查一下是否有其他的 CSS 规则对于相同的元素（`el-main`）设置了背景色，这可能会导致你的 CSS 规则被覆盖。 2. 你的 CSS 规则可能有语法错误。检查一下你的 CSS 规则是否有语法错误，这可能会导致浏览器无法正确解析你的代码，也就不会应用到相应的元素上。 3. 你的 `scoped` 可能不是在 `el-main` 元素的上方。在 Vue 中，`scoped` 只会对其内部的元素生效，如果你的 `scoped` 是在 `el-main` 的子元素上方，那么它里面的 CSS 规则是不会对 `el-main` 生效的。 希望这些建议能帮助你解决问题。 ### 回答2： 如果在使用scoped的时候更改el-main的背景色不生效，可能有一些原因可以导致这种情况发生。 首先，scoped是为了确保样式只在当前组件中起作用，并避免样式污染其他组件。在这种情况下，可能是因为其他样式规则覆盖了el-main的背景色。你可以通过检查其他组件或全局样式表中是否存在与el-main相关的样式规则，并确保它们不会覆盖你更改的背景色。 其次，如果你是通过设置el-main的样式来更改背景色，你需要确保你的样式选择器是正确的。在scoped模式下，类和ID选择器是无效的，你应该使用标签选择器或属性选择器。例如，你可以使用" .el-main"或"[el-main]"来选择el-main元素。 另外，你还可以尝试使用!important关键字来强制使你的背景色属性生效。例如，你可以这样设置样式： ``` <style scoped> .el-main { background-color: red !important; } </style> ``` 最后，还有可能是因为其他组件或全局样式表中使用了scoped或CSS Modules，它们可能会导致样式丢失或覆盖。如果有这种情况，你可以尝试在父组件中使用/deep/或>>>组合选择器来穿透scoped限制，以便更改el-main的背景色： ``` <style scoped> /deep/ .el-main { background-color: red; } </style> ``` 希望以上解释对你有所帮助，如果问题仍然存在，请提供更多细节以便更好地帮助你解决问题。 ### 回答3： 如果在scoped样式中更改了element-ui的组件el-main的背景色却不生效，可能的原因是scoped样式的特性导致了样式无法正确覆盖el-main组件的样式。 在Vue中，使用了scoped属性的样式将只会应用于组件的根元素及其子元素，而不会对其他元素生效。由于element-ui的组件el-main是封装好的，它内部可能已经定义了一些样式，并且这些样式是通过非scoped的方式应用在el-main上的。 要解决这个问题，可以尝试以下几种方法： 1. 使用/deep/选择器：在样式中使用`/deep/`选择器来穿透scoped样式的限制，直接对el-main组件及其子元素应用样式。例如，可以使用`.el-main /deep/`来选择el-main及其子元素的样式，然后设置背景色。 2. 使用深度选择器：在Vue 2.6.0+版本中，可以使用`>>>`或`::v-deep`来选择scoped样式之外的元素。例如，可以使用`.el-main >>> .el-main-scrollbar`来选择el-main中的滚动条元素，然后设置背景色。 3. 通过父组件传递props：在父组件中定义一个属性，将需要更改的背景色作为prop传递给el-main组件。然后，在el-main组件中使用prop的值作为背景色。 4. 使用全局样式：如果需要在整个应用中更改el-main的背景色，可以通过在全局样式中直接覆盖el-main的样式来实现。将样式写在App.vue等全局样式文件中，并且确保全局样式的引入顺序在element-ui样式之后，即可正确生效。 以上是一些常见的解决方法，根据具体情况选择适合的方式来解决scoped中更改el-main背景色不生效的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值