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