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