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