Element 表格实现左右自动滚屏

前两天公司需要实现一个功能(用于大屏幕投屏):

自定义表头及内容 ,并且固定左边几列实现: 从左往右滚屏 滚动到后面没有列后 开始第二页的滚屏,以此类推 拉取到最后 没有数据又从第一页开始滚

实现思路:

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

div左边卷去的长度=div的总宽 -  div屏幕可视区域的宽(div 即 设置overflow 的div )

上面的列子即为 scrollLeft=scroollWidth-clientWidth;

前后端商量 给什么样的数据结构 宽度,固定多少列,都有后台控制  如下:

Element 表格实现左右自动滚屏_第1张图片 

Element 表格实现左右自动滚屏_第2张图片

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

 

具体代码如下:





 

你可能感兴趣的:(前端,VUE,前端框架)