el-table 添加height 固定表头之后,表头右侧留白解决

1,717 阅读1分钟

今天在写一个拖拽计算的时候,因为要获取到计算结果,底部留有高度不够el-table展示,所以就添加了height属性来固定表头,结果碰到了一个坑

直接通过官方示例添加 height 可以实现表头固定,但是表头右侧会出现一个留白的问题(官方示例也有这个问题,但是官方主题是白色的,所以看不出来)

                <el-table
                    :data="tableData"
                    border
                    class="my-el-table"
                    header-row-class-name="custom-table-header-row"
                    height="310"
                    row-class-name="custom-table-row"
                    style="width:100%"
                >
                    <el-table-column align="center" label="序号" type="index" width="50" />
                    <el-table-column align="center" label="Date" prop="date" width="180" />
                    <el-table-column align="center" label="Name" prop="name" width="180" />
                    <el-table-column align="center" label="Address" prop="address" />
                </el-table>

image.png

在利用浏览器F12修改了样式之后即可解决

通过自定义修改el-table的样式 就可成功解决

/deep/.my-el-table {
    overflow-x: hidden;
    .el-table__header-wrapper {
        .el-table__header {
            width: calc(100% + 32px) !important;
        }
    }
    .el-table__body-wrapper {
        width: calc(100% + 16px) !important;
        .el-table__body {
            width: calc(100% + 16px) !important;
        }
    }
}

image.png 这其实是将表格给固定宽度,然后将表格内容加宽,然后表格overflow-x: hidden滚动条超出表格内容,就不会看到滚动条,但是滚动的功能依然存在,等于视觉上取消滚动条展示

此方法针对于 1920 * 1080 分辨率的电脑 向下实测了 1366 * 768 的,可能会存在表格视觉上有稍微对不齐的效果(也有可能是电脑的问题)

实际观察的时候好像也没有对不齐的问题

image.png

此方法不仅仅针对于el-table

很多时候因为浏览器滚动条样式太丑,需要调滚动条样式,我们可以通过此方法来对滚动条进行一个隐藏效果,但是实际的滚动条的滚动功能依然存在。

如果大佬们有更优的解决方案,可以透露一下。