最终效果图:
实现步骤:(以Element里的效果图做演示)
- 给 el-table 固定高后,当数据过多时,会出现一条滚动条列,如下图:
- 给表头设置如下样式,可移出表头列
.el-table { /deep/ colgroup col[name='gutter'] { display: none; width: 0; } /deep/ .el-table__header .el-table__cell.gutter { display: none; width: 0px !important; } }
效果如下:
-
可以发现出现了新的问题,表头列与内容列发生了错位。解决方法:给内容宽度加上滚动条的宽度。代码如下:
.el-table { /deep/ .el-table__body { // 此处 17px 为滚动条宽度 width: calc(100% + 17px) } }
效果如下: