vue和jquery实现动态轮播table

<div class="grid-content table-content">
	<div id="divTableHeader">
    	<table class="table">
        	<thead>
            	<tr>
                	<th width="20%">内部模板号</th>
                    <th width="50%">模板名称</th>
                    <th width="15%">短信条数</th>
                    <th width="15%">是否超阈值</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="panel-body" id="divTable" style="padding:0;overflow:hidden;position:relative">
    	<div id="divTableContent" style="position:absolute;width:100%">
        	<table id="trueTable" class="table table-responsive table-striped">
            	<tbody>
               		<tr v-for="item in msgData"
                    	:style="{color:(item.overvalueOrNot==1?'#ff0000':'inherit')}">
	                	<td width="20%">{{item.templateID}}</td>
                        <td width="50%" style="padding-left: 20px;">{{item.templateName}}</td>
                        <td width="15%">{{item.msgNum}}</td>
                        <td width="15%">{{item.overvalueOrNot|transToChn}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

表格滚动methods中方法：

tableScorll: function () {  //表格滚动
	var tableH = $('#divTableContent').outerHeight(true);
    var top = parseInt($('#divTableContent').css('top'));
    var bottom = parseInt($('#divTableContent').css('bottom'));
    var trH = $('#trueTable tr').outerHeight(true); //获取短信table tr的高度
    if ((bottom * -1) > trH) {
    	top -= trH;
    }
    else {
    	top += bottom;
    }
    if (top * (-1) >= tableH || bottom >= 0) {
    	top = 0;
        $('#divTableContent').animate({ 'top': top }, 200)
    }
    else {
    	$('#divTableContent').animate({ 'top': top }, 500)
    }
},

mounted挂载：

this.tableTimer = setInterval(() => {
	_this.tableScorll();    //短信table每2秒一滚动
}, 2000);
this.msgTimer = setInterval(() => {
	_this.setMsgData();      //调用方法获取告警table数据
}, 5000);

vue实例销毁时清除定时器：

if (this.msgTimer) {
	clearInterval(this.msgTimer); // 在Vue实例销毁前，清除短信table轮播定时器
};
if (this.tableTimer) {
	clearInterval(this.tableTimer); // 在Vue实例销毁前，清除滚动table轮播定时器
};