Vue : html table固定表头、表格内容无缝滚动的一种匪夷所思的解决方案-526互联

背景

需求是一个能适配主流分辨率的表格，表头固定，表格内容上下滚动

首先尝试的这个原生的标签，但是有个问题啊，就是在循环滚动中，每次滚动之间会出现大片空白。

大概是这样：第一行--滚动--最后一行--滚动--大片空白--滚动--第一行

所以放弃了marquee标签，选择使用js和原生的html table。

都用上Vue了，为什么还要用html table呢？

这个主要是因为el-table自己的样式太多了，不是很好做分辨率的适配。

所以选择了原生的table，用innerHtml的方式动态填充样式和数据。

实现思路

为了表头可以固定，我把表头单独抽出来写了个table
表格内容单独成一个table，并且用div包围起来
给div添加@mounseover和@mounseout事件，做到鼠标移入表格时暂停滚动，离开表格时开启滚动
mouseout事件：开启滚动的定时器，定时器内容如下：

scrollArray是在全局定义的一个数组，用来记录div的位置，每记录10个就清空重新装。

如果div的位置连续不变，说明它滚不动了，到底了已经。这个时候就把位置置零，也就是回到第一行。

// table外层的div 
var div = document.getElementById("tableDiv");
// table
var table = document.getElementById("table");
// 获取所有的数据行数
var count = table.rows.length;
// 如果数据大于4行才开始滚动(因为我这边table一次性只显示行)
if (count > 4) {
	// div上移
	div.scrollTop++;
	// 数组记录此刻位置
	this_.scrollArray.push(div.scrollTop);
	// 当数组长度达到10时
	if (this_.scrollArray.length >= 10) {
		// 如果数组末端位置不再变化,说明滚动到底部了
		if (this_.scrollArray[8] == this_.scrollArray[9]) {
			// 重回第一行
			div.scrollTop = 0;
		}
		// 清空数组
		this_.scrollArray = [];
	}
}