element-plus 如何修改el-table 滚动条高度,el-table滚动条放置在表格外面
先上效果图:
实现方式,自定义全局的element样式如下:
/** * 表格滚动条 */ // 横向滚动条高度 $scrollbarheight: 15px; .el-scrollbar { //偏移 .el-scrollbar__bar{ bottom: 1px; } //高度 .el-scrollbar__bar.is-horizontal{ height: $scrollbarheight; } // 横向滚动条 .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb { // opacity: 1; // 默认滚动条自带透明度 height: $scrollbarheight ; // 横向滑块的宽度 border-radius: 5px; // 圆角度数 // background-color: var(--el-color-primary-light-4); // 滑块背景色 // box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影 } // 纵向滚动条 .el-scrollbar__bar.is-vertical .el-scrollbar__thumb { // opacity: 1; width: 8px; // 纵向滑块的宽度 // border-radius: 2px; // background-color: rgba(136, 219, 255, 1); // box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); } } /** * 奇葩需求:表格滚动条需要放置在表格外部!!! * 由于表格父容器overflow: hidden;因此无法通过abslute定位来解决, * 目前的解决办法是从表格行中抠出部分高度,修改原有边框的高度, */ //设置 表格行总高度 .el-scrollbar { .el-scrollbar__wrap{ height: calc(100% - $scrollbarheight) !important; } } //清除表格左边框 .el-table__border-left-patch { height: 0px; } //缩短表格左边框 .el-table--border:before{ height: calc(100% - $scrollbarheight) !important; } //缩短表格右边框 .el-table--border:after{ height: calc(100% - $scrollbarheight) !important; } //清除 表格下边框 .el-table__inner-wrapper:before { height: 0px; } //新增表格下边框 .el-scrollbar .el-scrollbar__wrap { border-bottom: 1px solid var(--el-table-border-color); }