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

背景

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

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

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

所以放弃了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 = [];
	}
}

• mouseover事件：鼠标移入表格，清除定时器。

遇到的一个坑

表格最后一行数据藏在下面不显示，原因还不明确。

可以用控制台的调试工具看到那一行在页面元素中，但是就是不显示。

搜了一下，好像是有解决办法的，好像有点点复杂，所以我选择了另一种不是很规范的方法：

不就是最后一行数据不显示嘛，那我每次填充数据的时候，额外填充一行没用的数据，这样有效数据就都能显示完成啦。

（表格涉及的业务不复杂，所以才这样的，涉及到复杂业务的朋友，譬如全选多选之类，还是勇敢地选择el-table吧）