前端|Element 表格实现左右自动滚屏前端框架|VUE

前两天公司需要实现一个功能(用于大屏幕投屏):
自定义表头及内容 ,并且固定左边几列实现: 从左往右滚屏滚动到后面没有列后开始第二页的滚屏,以此类推拉取到最后没有数据又从第一页开始滚
实现思路:

监听滚动事件,
页面一加载去后台调用数据,成功后触发事件
判断是否滚动到最后如果滚到最后将scrollLeft 设置为0,没有就scrollLeft++;

div左边卷去的长度=div的总宽 -div屏幕可视区域的宽(div 即设置overflow 的div )
上面的列子即为 scrollLeft=scroollWidth-clientWidth;
前后端商量给什么样的数据结构宽度,固定多少列,都有后台控制如下:

文章图片

文章图片

后台分表头和数据这样给 TableTitle + TableData这样的结构 ;

具体代码如下:

@yellow:#ff5402; .schedule{ background-color: #000000; height: 99.5vh; padding-top: 0.1px; header{ background-color:@yellow; height: 80px; margin-bottom: 15px; border-radius: 40px; text-indent: 30px; h1{ text-align: left; line-height: 80px; /*font-size: 2.5rem; */ font-size: 4rem; margin-top: 15px; } } article{ height: auto; } article::-webkit-scrollbar { width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px; } article::-webkit-scrollbar-thumb { border-radius: 5px; background: #7d7b7c; } article::-webkit-scrollbar-track { border-radius: 0; background: #979596; }}.schedule{ @import "~@/components/reportCommon/theme.less"; /*.el-table__body{ width: auto!important; min-width: 100% !important; } .el-table__header{ width: auto!important; min-width: 100% !important; }*/ .el-table{ color: #ffffff; &::before{ height: 0px; } th,tr { background-color: rgb(101,99,100); } th.is-leaf { border-bottom: 1px dashed #ff5402; text-align: center; } .cell { /*font-size: 1.5rem !important; */ span{ font-size: 2.2rem !important; } //line-height: 28px; } } .el-table__body-wrapper{ background-color: #656365; }/deep/ .el-table__body tr.hover-row > td{ background: none; } /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td { background: none; } .el-table__fixed::before{ height: 0px; } .el-table__fixed{ &:nth-last-of-type(1){ margin-top: 83px !important; } } .el-table td, .el-table th.is-leaf { border-bottom: 1px dashed #ff5402; text-align: center; /*font-size: 1.5rem; */ } .el-table thead { color: #ff5402; font-weight: 500; } .el-table__header { span{ /*font-size: 1.5rem; */ font-size:2.5rem; } } .el-table__empty-block { background-color: #656364 ; } .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/ .el-table-scrollbar; } .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ .el-table-scrollbar-thumb_gary; } .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/ .el-table-scrollbar-track_gary; } .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/ .el-table-scrollbar; } .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ .el-table-scrollbar-thumb_gary; } .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/ .el-table-scrollbar-track_gary; }}

【前端|Element 表格实现左右自动滚屏】