利用css解决el-table__fixed,el-table__fixed-right遮挡底部滚动条区域的问题

最近有个vue2的老项目要维护,elementui总是有很多莫名其妙的bug,最近突然发现el-table 操作栏区域使用了fixed="right"后,右侧操作栏区域总是会遮挡底部滚动条区域,只有浏览器窗口变动后高度才会正确,后面开了控制台,发现是el-table__fixed-right计算的高度有问题,观察后发现el-table__fixed-right是必定在**.is-scrolling-xxx**,或者**.el-table__fixed**后面的,所以就有办法使用css选中它了,还不会影响不出现浮动时的高度区域情况

.is-scrolling-left,
  .is-scrolling-middle,
  .is-scrolling-right {
    // 解决只有fixed="right"时右侧区域的高度问题
    & + .el-table__fixed-right {
      height: calc(100% - 17px) !important;
    }
    // 解决fixed="left"时左侧区域的高度问题
    & + .el-table__fixed {
      height: calc(100% - 17px) !important;
      // 解决同时有fixed="left",fixed="right"时右侧区域的高度问题
      & + .el-table__fixed-right {
        height: calc(100% - 17px) !important;
      }
    }
  }

下面是效果
在这里插入图片描述

  • 我是写在全局index.scss里的,写在vue文件里的话需要自行添加deep。
  • 减的17px为滚动条高度,如果你改了默认的滚动条样式需要自行修改对应的高度
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值