前提，最近專案中需要實現table的滾屏效果，並且使用的是iview的table元件，踩坑，填坑如下。

1、首先找到Table元件中的table,就是這個class:ivu-table-body

template部分程式碼

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

2、接著獲取DOM的id,並獲取到元素的scrollTop值，改變scrollTop的值就可以實現滾屏效果

 1  setTimeout(function
 
 () {
 2           console.log(document.getElementsByClassName('ivu-table-body'))
 3           var table = document.getElementsByClassName('ivu-table-body');
 4           console.log(table);
 5           console.log(table[0].height)
 6           var timer = null;
 7           // table.scrollTop = 0;
 8           //
 
 table.innerHTML += table.innerHTML;
 9           // console.log(table.innerHTML)
10           console.log(11111)
11 
12           function play(){
13             clearInterval(timer);
14             timer = setInterval(function () {
15               table[0].scrollTop++;
16               // alert(11111)
17
 
               console.log(table[0].scrollTop)
18               console.log(table);
19               // alert(table.scrollHeight)
20               if ((table[0].scrollTop )>= (240 / 2)){
21                 table[0].scrollTop = 0;
22                 // alert(222222)
23               }
24 
25             },100)
26           }
27 
28           setTimeout(play,500);
29 
30           table.onmouseover = function () {
31             clearInterval(timer)
32 
33           };
34           table.onmouseout = play;
35 
36         },0)

3、要設定父元素的heigh,overflow屬性。

1 <style >
2   .headcol .ivu-table-body {
3     overflow: hidden ;
4     height: 258px ;
5   }

tip:style屬性中如果加了scope,那麼就會沒效果，所以直接用的style。要用父元素+class包裹一下,不然全域性table元件的高度會被改變。

填坑完畢。

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