el-menu-item内容过多,不能滚动

问题描述
在这里插入图片描述
这里放了六张图片,只能看到最下面的部分,上面的部分被挤出了屏幕外面。
在这里插入图片描述
这里的弹出框是element ui组件自动生成的,即这个div
在这里插入图片描述
我此时有关这部分的代码如下
在这里插入图片描述
解决思路:
一开始是想抓住这个生成的div,修改这个div的样式试图让它可以滚动,虽然最后生成了滚动条,但却没法滚动。
之后就去找这个东西的源码,试图将组建底层的东西进行修改,修改掉生成div的样式,但最后没有找到,也就放弃了。
最后想到,既然不能对它这个div做改变,那为何不能自己加一个div呢?然后对自己加的这个div进行滚动处理?既然有了新的想法,那就开始行动起来!!!
在这里插入图片描述
运行结果:
在这里插入图片描述
这样一看,这个默认的滚动框有一些不太美观,那我们就来修改一下、
我这里使用的是Vuescroll,当然也有很多其他的方式,我这里就不提供啦。
可以参考网址:
Vue更改默认滚动条样式
Vuescroll.js官网
在这里插入图片描述
到这里,对于这个问题就告一段落了,这篇文章是在学习过程中碰到的问题,但网上又没有看到相关的解决方案,所以就写这样一篇文章分享一下自己的解决方法,也感谢大家看完了这篇文章,当然如果有更好的解决方案或思路,我希望大家能告诉我,并一起来学习探讨一下,让我们一起变得更加优秀!

  • 14
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值