el-table固定列导致表格的横向滚动条不可滑动

elementUi 里面的table组件使用了固定列fixed,当表格数据为空时底部的滚动条不可滑动。

主要原因就是固定列的div把滚动条给遮住了,由于层级的原因导致点不到下面的滚动条所以滚动条就失效了。
在这里插入图片描述

解决方法:
1.改变这个固定列盒子距底部的距离,致使不遮住滚动条。

        /*解决固定列遮盖底部滚定条导致滚动条无法滚动的问题*/
        .el-table .el-table__fixed {
            height: auto !important;
            bottom: 13px;
        }

缺点:在没出现固定列的条件下会导致表格样式缺陷在这里插入图片描述
2.可以直接改变el-table__body-wrapper的层级(推荐)

/*解决固定列遮盖底部滚定条导致滚动条无法滚动的问题*/
        .el-table__body-wrapper{
            z-index: 2
        }
  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要让 `el-table` 的横向滚动条固定在屏幕底部,你可以在表格外部嵌套一个容器,用来固定表头和横向滚动条的位置,然后将表格放置在容器内部,并设置它的高度、宽度和 `overflow` 样式,用来实现纵向滚动。同时,你还需要通过 JavaScript 代码来动态计算容器的高度和横向滚动条的位置,以确保横向滚动条始终出现在屏幕底部。下面是一个示例代码: ```html <template> <div class="table-container"> <el-table ref="table" :data="tableData" style="width: 100%;" :row-class-name="tableRowClassName" > <!-- 表格 --> </el-table> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据 }; }, mounted() { this.$nextTick(() => { this.updateTableContainerHeight(); // 计算容器高度 window.addEventListener('resize', this.updateTableContainerHeight); // 监听窗口大小变化 const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); tableEl.addEventListener('scroll', this.updateTableContainerHeight); // 监听表格滚动事件 }); }, beforeDestroy() { window.removeEventListener('resize', this.updateTableContainerHeight); // 移除事件监听器 const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); tableEl.removeEventListener('scroll', this.updateTableContainerHeight); }, methods: { tableRowClassName({ row, rowIndex }) { // 自定义表格行样式 }, updateTableContainerHeight() { const tableContainerEl = this.$el.querySelector('.table-container'); const tableEl = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); const offsetTop = tableContainerEl.getBoundingClientRect().top; const windowHeight = window.innerHeight; const tableHeight = tableEl.clientHeight; const scrollHeight = tableEl.scrollHeight; const bottom = windowHeight - offsetTop - tableHeight; if (scrollHeight > tableHeight) { tableContainerEl.style.height = `calc(100vh - ${offsetTop}px - ${bottom}px)`; tableEl.style.overflowX = 'scroll'; tableEl.style.overflowY = 'hidden'; tableEl.style.maxHeight = `calc(100vh - ${offsetTop}px - ${bottom}px - 17px)`; } else { tableContainerEl.style.height = ''; tableEl.style.overflowX = ''; tableEl.style.overflowY = ''; tableEl.style.maxHeight = ''; } }, }, }; </script> <style> .table-container { position: relative; overflow: hidden; } </style> ``` 在这个示例代码中,我们首先在表格外部嵌套了一个容器,并设置它的 `position` 样式为 `relative` 和 `overflow` 样式为 `hidden`,用来固定表头和横向滚动条的位置。然后,我们将表格放置在容器内部,并设置它的宽度为 `100%`,用来自适应容器的宽度。接着,我们在 `mounted` 钩子函数中计算容器的高度和横向滚动条的位置,并监听窗口大小变化和表格滚动事件,以动态更新容器的高度和横向滚动条的位置。最后,在 `beforeDestroy` 钩子函数中移除事件监听器,以避免内存泄漏。 需要注意的是,这个示例代码假设表格的纵向滚动条高度为 17px,如果你的表格纵向滚动条高度不同,你需要相应地调整代码中的计算公式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值