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>

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

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

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值