vue element-ui 表格横向滚动条在合计项下方

目前效果

需求效果

1.隐藏bodyWrapper滚动条,显示footerWrapper滚动条

css代码如下:

cpp 复制代码
div ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;z-index: 2!important;}
div ::v-deep .el-table__footer-wrapper {overflow-x: auto;border-top: 1px solid #f4f4f4;}

监听footerWrapper滚动条

在el-table上加上ref="detailTable"

cpp 复制代码
mounted() {
   var tableBody = this.$refs.detailTable.$refs.footerWrapper
   tableBody.addEventListener('scroll', () => {
     const scrollLeft = tableBody.scrollLeft
     this.$refs.detailTable.$refs.bodyWrapper.scrollLeft = scrollLeft
   })
},

参考文章
https://blog.csdn.net/qq_32289849/article/details/125290777?spm=1001.2014.3001.5502

相关推荐
夕水2 分钟前
原生js实现常规ui组件之checkbox篇
前端·javascript
编程二级爱好者4 分钟前
2025年9月计算机二级Web程序设计——选择题打卡Day5
前端·计算机二级
Tanjc5185 分钟前
uniapp H5预览图片组件
前端·vue.js·uni-app
ᥬ 小月亮10 分钟前
uniapp中输入金额的过滤(只允许输入数字和小数点)
前端·css·uni-app
共享ui设计和前端开发36 分钟前
UI前端大数据可视化实战策略:如何设计符合用户认知的数据可视化界面?
前端·ui·信息可视化
Akshsjsjenjd36 分钟前
Ansible 变量与加密文件全解析:从基础定义到安全实践
前端·安全·ansible
2503_9284115636 分钟前
9.2 BOM对象
前端·javascript
whysqwhw42 分钟前
JavaScript 动态代理全面指南
前端
Highcharts.js1 小时前
Highcharts Stock 股票图在交易系统中的应用思路
前端·数据可视化·股票图
teeeeeeemo1 小时前
前端模块化(commonJS和ES Module)
前端·笔记·es6·前端模块化