1. 前言

1. 前几天测试提了个bug,在不分页的页面.使用列表,数据太多的时候,
2. 条数很多,显示字段很多,需要滚动条左右滚动才能看全,
3. 测试说想要顶部来个滚动条,方便横向滚动
4. 我去看官网没找到,那就自己写吧
5. 项目原因,就不截项目效果图了

---

2. 模板 加个 div 宽度和 table相同

1. 代码结构图

   
   模板

 <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. 样式

1. 顶部滚动条

.top-scroll {
    overflow-y: hidden;
    overflow-x: auto;

    .top-scroll-content {
        background-color: #FFF;
        height: 1px;
    }
}

2. 底部滚动条
3. 我的需求是这个底部滚动条就不要了
4. 如果想要 上下双滚动条, 这个不写就行

::v-deep .el-table--scrollable-x .el-table__body-wrapper{
    overflow-x:hidden
}

• 如果滚动条还要特殊样式,那就自己写吧

---

4. data 数据定义

        tableWidth: {
                width: 0
            },
        listLoading: false,

---

5. 请求

1. 结构示意 js逻辑

2. 方便复制 源码

   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. 后记

1. 让我冷静会
2. 现在改成动态计算列表高度,可视区域能看见就行,超出部分隐藏....
3. 其实简单的设置个流体高度也行
4. 屏幕可以进行缩放,所以我是采用动态计算的方式来实现的

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉