u-table表格自定义滚动

情景

页面在点击按钮跳转到弹窗后,调用完接口后回到主页面滚动条留在原位置

u-table刷新页面后滚动条留在原位置
1. 调用接口前保存当前滚动条的位置
this.scrollTop = this.$refs.table.$refs.singleTable.$refs.bodyWrapper.scrollTop;// 保存当前滚动条距离

2. 调用接口后设置滚动条距离,设置完后,清空滚动距离
setTimeout(() => {
   if (this.scrollTop) {
        this.$refs.table.$refs.singleTable.$refs.bodyWrapper.scrollTop = this.scrollTop;
    }
    this.scrollTop = 0; 
}, 1000); 
### 实现 Element UI `el-table` 表格横向滚动条固定效果 为了使 `el-table` 的横向滚动条始终显示并保持在可视窗口底部,可以采用以下两种主要策略: #### 方法一:调整 CSS 样式以确保滚动条可见性 通过自定义样式来控制表格容器的高度以及滚动条的位置。具体做法是在页面加载完成后设置 `.el-table__body-wrapper` 和其父级元素的样式属性。 ```css ::v-deep .el-table { position: relative; } ::v-deep .el-table__header-wrapper, ::v-deep .el-table__footer-wrapper { overflow-x: hidden!important; } /* 设置table body的最大高度 */ ::v-deep .el-table__body-wrapper { max-height: calc(100vh - 200px); /* 调整此值适应实际需求 */ overflow-y: auto; } ``` 上述代码片段中的 `- 200px` 需要根据实际情况调整,确保整个表格不会超出浏览器视窗范围的同时给下方预留足够的空间放置固定的水平滚动条[^1]。 #### 方法二:利用 JavaScript 动态计算并应用样式 如果仅靠静态CSS难以达到理想的效果,则可以通过JavaScript动态获取当前页面布局信息,并据此设定合适的内边距或外边距,从而让滚动条始终保持可见状态。 ```javascript function fixScrollbar() { const tableWrapper = document.querySelector('.el-table__body-wrapper'); if (!tableWrapper) return; let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; Object.assign(tableWrapper.style, { paddingBottom: `${scrollbarWidth}px`, boxSizing: 'border-box' }); } // 页面初始化时调用一次 fixScrollbar(); // 监听窗口大小变化事件,在每次改变尺寸后重新执行函数 window.addEventListener('resize', fixScrollbar); ``` 这段脚本会自动检测是否有垂直方向上的滚动条存在,并相应地增加表体部分的下填充量,使得即使有额外的内容也不会遮挡住水平滚动条[^2]。 以上两种方式可以根据具体的项目环境和个人偏好选择合适的一种实施。值得注意的是,对于不同版本的Element UI库或者其他框架集成情况可能会有所差异,请务必测试确认最终呈现是否满足预期。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值