iview修改table组件实现循环向上滚屏

前提，最近项目中需要实现table的滚屏效果，并且使用的是iview的table组件，踩坑，填坑如下。

1、首先找到Table组件中的table,就是这个class:ivu-table-body

template部分代码

 div class="headcol" >
     <Table border :columns="columns7" :data="data6"  ></Table>
   </div>

2、接着获取DOM的id,并获取到元素的scrollTop值，改变scrollTop的值就可以实现滚屏效果

  setTimeout(function () {
           console.log(document.getElementsByClassName('ivu-table-body'))
           var table = document.getElementsByClassName('ivu-table-body');
           console.log(table);
           console.log(table[0].height)
           var timer = null;
           // table.scrollTop = 0;
           // table.innerHTML += table.innerHTML;
           // console.log(table.innerHTML)
           console.log(11111)
 
           function play(){
             clearInterval(timer);
             timer = setInterval(function () {
               table[0].scrollTop++;
               // alert(11111)
               console.log(table[0].scrollTop)
               console.log(table);
               // alert(table.scrollHeight)
               if ((table[0].scrollTop )>= (240 / 2)){
                 table[0].scrollTop = 0;
                 // alert(222222)
               }
 
             },100)
           }
 
           setTimeout(play,500);
 
           table.onmouseover = function () {
             clearInterval(timer)
 
           };
           table.onmouseout = play;
 
         },0)

3、要设置父元素的heigh,overflow属性。

 <style >
   .headcol .ivu-table-body {
     overflow: hidden ;
     height: 258px ;
   }

tip:style属性中如果加了scope,那么就会没效果，所以直接用的style。要用父元素+class包裹一下,不然全局table组件的高度会被改变。

填坑完毕。

参考：https://blog.csdn.net/u012138137/article/details/80729789