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

今天在写一个拖拽计算的时候，因为要获取到计算结果，底部留有高度不够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>

在利用浏览器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;
        }
    }
}

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

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

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

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

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

如果大佬们有更优的解决方案，可以透露一下。
转自本人稀土掘金，https://juejin.cn/post/7041019257768902669