vue中el-table两个表尾合计行联动同步滚动条实例代码

问题描述

最近产品提出一个需求,说是做表格呈现统计数据,不过数据源是来自两个地方的,所以需要做两个表格去呈现数据,同时在表格最后统计数据。

效果图

我们先看一下效果图

思路

获取对应的两个表格设置滚动条的dom,并通过Element.scrollLeft去设置滚动的距离

官方文档:developer.mozilla.org/zh-CN/docs/…

滚动容器(审查元素即可得知):

vue中el-table两个表尾合计行联动同步滚动条实例代码_第1张图片

完整代码

自己演示的话,直接复制粘贴即可,代码中包含注释


总结

到此这篇关于vue中el-table两个表尾合计行联动同步滚动条的文章就介绍到这了,更多相关vue el-table联动同步滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue中el-table两个表尾合计行联动同步滚动条实例代码)