1. 前言
- 前几天测试提了个bug,在不分页的页面.使用列表,数据太多的时候,
- 条数很多,显示字段很多,需要滚动条左右滚动才能看全,
- 测试说想要顶部来个滚动条,方便横向滚动
- 我去看官网没找到,那就自己写吧
- 项目原因,就不截项目效果图了
2. 模板 加个 div 宽度和 table相同
代码结构图
模板
<div ref="topScroll" class="top-scroll" @scroll="handleScrollTop">
<div class="top-scroll-content" :style="tableWidth"></div>
</div>
<!-- table属性自己写 -->
<el-table class="mt-1" ref="myTable" :data="tableData"
v-loading="listLoading" >
</el-table >
3. 样式
- 顶部滚动条
.top-scroll {
overflow-y: hidden;
overflow-x: auto;
.top-scroll-content {
background-color: #FFF;
height: 1px;
}
}
- 底部滚动条
- 我的需求是这个底部滚动条就不要了
- 如果想要 上下双滚动条, 这个不写就行
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
overflow-x:hidden
}
- 如果滚动条还要特殊样式,那就自己写吧
4. data 数据定义
tableWidth: {
width: 0
},
listLoading: false,
5. 请求
- 结构示意
js逻辑
- 方便复制 源码
setTimeout(() => {
if (this.$refs.myTable) {
this.tableWidth.width = this.$refs.myTable.bodyWrapper.scrollWidth + 'px'
this.$refs.myTable.doLayout()
this.tableDom = this.$refs.myTable.bodyWrapper
this.tableDom.addEventListener('scroll', () => {
let scrollLeft = this.tableDom.scrollLeft
this.$refs.topScroll.scrollTo(scrollLeft,0)
})
}
})
6. 后记
- 让我冷静会
- 现在改成动态计算列表高度,可视区域能看见就行,超出部分隐藏....
- 其实简单的设置个流体高度也行
- 屏幕可以进行缩放,所以我是采用动态计算的方式来实现的
