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