css-修改element ui的el-popover样式

背景:在选择所属部门(部门可新建,则部门会很多)时,如果部门特别多的情况下,在下拉选择时,el-popover弹出框会变得很长很长,页面不美观。

 产品要求:在超长时,固定高度,支持滚动条。

在代码里修改样式时,一直不生效,仔细查看dom才发现,popover的dom创建在了最外层,也就是和根组件app同级,所以在任何的<style scoped></style>下写的css均不能生效。

如果直接在<style></style>下粗暴修改,肯定会影响到其他组件的样式,不可以这样修改。

查阅官方文档发现,可以为popover组件添加类名,这样就不会影响其他样式了。

 代码如下:

 效果如下:


还可以对滚动条的样式进行修改,比如隐藏滚动条或者改变滚动条的粗细等

代码:

.el-popover.user-el-popover  {
    max-height: 400px;
    overflow-y: auto;
    &::-webkit-scrollbar {
        // display: none !important;; //隐藏
        width: 20px; //宽度写成20px
    }
}

效果:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值