利用css解决el

2023-11-07 00:13| 来源: 网络整理| 查看: 265

最近有个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为滚动条高度，如果你改了默认的滚动条样式需要自行修改对应的高度

【本文地址】

公司简介

联系我们