el-table增加顶部滚动条，表格实现上下双滚动条

效果图：

实现方式：
1.加一个div,宽度和表格相同：

handleScrollTop方法：

handleScrollTop() {if (this.$refs.topScroll) {let scrollLeft = this.$refs.topScroll.scrollLeftthis.$refs.multipleTable.bodyWrapper.scrollTo(scrollLeft, 0);}
}

!
2.监听表格宽度，并给元素和滚动条元素绑定滚动事件：
原理：两个滚动条滚动时，同时控制另一个滚动条滚动。
表格滚动条监听代码：

getTableData() {this.loading = truethis.tableData = []achievementsApi.getTableDataApi(this.params).then(res => {this.loading = falsethis.tableData = res.data.result.rowsthis.tableTotal = res.data.result.totalsetTimeout(() => {if (this.$refs.multipleTable) {this.tableWidth.width = this.$refs.multipleTable.bodyWrapper.scrollWidth + 'px'this.$refs.multipleTable.doLayout()//此代码为监听表格滚动条的事件：this.tableDom = this.$refs.multipleTable.bodyWrapperthis.tableDom.addEventListener('scroll', () => {// 滚动距离let scrollLeft = this.tableDom.scrollLeftthis.$refs.topScroll.scrollTo(scrollLeft, 0);})}}, 500)}).catch(err => {this.loading = false})
},

顶部滚动条样式：

/*顶部滚动条*/
.top-scroll {overflow-x: auto;overflow-y: hidden;.top-scroll-content {background-color: #fff;height: 1px;}
}

el-table增加顶部滚动条，表格实现上下双滚动条相关推荐

iframe去除双滚动条
iframe嵌套的内容多的时候会自带滚动条一.问题描述二.问题处理 1.思路 2.实现三.效果一.问题描述当iframe嵌套的内容多的时候会自带滚动条,致使出现双滚动条,如图二.问题处理 ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
eChart 中柱状图、地图、AntDesign 的滚动条表格、highChart 的（venn）韦恩图
一.echarts 的准备工作 1.下载依赖包 // 项目中下载依赖 npm install echarts -s 2.引入配置 // 1. main.js 中引入全局使用 (通过this.$ec ...
php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
ElementUI中为table增加小计/合计
ElementUI中只有为表格增加一个合计的功能,但是有些时候可能会遇到同时增加小计/合计的功能,可以利用slot='append'去实现多个合计功能. 文章地址: ElementUI中为table增 ...
跟我一起学extjs5(05--主界面上增加顶部和底部区域)
跟我一起学extjs5(05--主界面上增加顶部和底部区域) 这一节为主界面加一个顶部区域和底部区域. 一个管理系统的界面能够粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状 ...
根据需求增加或删除表格行
根据需求增加或删除表格行 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:2019年 ...
table标签，制作表格注册表
table标签,制作表格注册表今天复习了一下html,发现在表格,表单这一方面还是不够熟练,所以写了这篇文章,以便复查. 首先,来看看要做成的注册表: 性格测试表,一键生成你的性格表这里我用标题标 ...
html颜色代码表odd,CSS的odd和even属性实现table表格tr单双行颜色相间而不同
CSS的odd和even属性实现table表格tr单双行颜色相间而不同  0  325 暴猿 2019/6/13 9:04:47 效果如下图所示: img[/layedit/img/2019061 ...

el-table增加顶部滚动条，表格实现上下双滚动条

el-table增加顶部滚动条，表格实现上下双滚动条相关推荐

最新文章

热门文章