//上下滚动时数据处理 dataProcessing(topNum, bottomNum, type) { let topPosition = parseInt(this.dataTop / this.tdHeight); if (type === "top") { this.showTableList.splice(this.loadedNum - bottomNum, bottomNum); //减去底部数据 for (var i = 1; i <= topNum; i++) { //加上顶部数据 let indexNum = topPosition - i; this.tableList[indexNum].index = indexNum + 1; this.showTableList.unshift(this.tableList[indexNum]); } this.loadedNum = this.loadedNum + topNum - bottomNum; //重新计算实际渲染数据条数 this.dataTop = this.dataTop - topNum * this.tdHeight; //重新计算渲染数据的高度 document.getElementById("bottomDiv").scrollTop = document.getElementById("bottomDiv").scrollTop + bottomNum * this.tdHeight; this.scrollTop = document.getElementById("bottomDiv").scrollTop; } else if (type == "bottom") { this.showTableList.splice(0, topNum); //减去顶部数据 for (var i = 0; i < bottomNum; i++) { //加上底部数据 let indexNum = topPosition + this.loadedNum + i; this.tableList[indexNum].index = indexNum + 1; this.showTableList.push(this.tableList[indexNum]); } this.loadedNum = this.loadedNum - topNum + bottomNum; //重新计算实际渲染数据条数 this.dataTop = this.dataTop + topNum * this.tdHeight; //重新计算渲染数据的高度 document.getElementById("bottomDiv").scrollTop = document.getElementById("bottomDiv").scrollTop - topNum * this.tdHeight; this.scrollTop = document.getElementById("bottomDiv").scrollTop; } else if (type == "bottomAll") { this.showTableList = []; //减去顶部数据 let scrollNum = topNum; for (var i = 0; i < bottomNum; i++) { //加上底部数据 let indexNum = scrollNum - this.loadNum + i; this.tableList[indexNum].index = indexNum + 1; this.showTableList.push(this.tableList[indexNum]); } this.loadedNum = bottomNum; //重新计算实际渲染数据条数 this.dataTop = (scrollNum - this.loadNum) * this.tdHeight; //重新计算渲染数据的高度 this.scrollTop = document.getElementById("bottomDiv").scrollTop; } else if (type == "topAll") { this.showTableList = []; //减去顶部数据 let scrollNum = bottomNum; for (var i = 0; i < topNum; i++) { //加上底部数据 let indexNum = scrollNum - topNum + this.loadNum + i; this.tableList[indexNum].index = indexNum + 1; this.showTableList.push(this.tableList[indexNum]); } this.loadedNum = topNum; //重新计算实际渲染数据条数 this.dataTop = (scrollNum - topNum + this.loadNum) * this.tdHeight; //重新计算渲染数据的高度 this.scrollTop = document.getElementById("bottomDiv").scrollTop; } this.showLoad = false; },
首先先删除我们之前计算好的应该删除的数据我们用 splice 方法删除对应的数据，然后通过一个简单的for循环，如果是向上滚动应该将数据加在顶部我们用 unshift 方法，如果是向下滚动我们应该加在底部我们用 push 方法。
处理好数据以后我们还需要重新计算实际渲染数据条数，将loadedNum的值改为现在显示的数据条数
重新计算渲染数据的高度，计算出dataTop现在显示的数据顶部的高度
因为 top 和 bottom 的变化会导致表格scrollTop的值出现变化，这个时候我们就要动态把滚动条移动到正确的位置
最后我们来说说之前考虑的 top 和 bottom ，一开始我们就想好了应该用计算属性去做，事实也说明的确这样，我们看看代码
computed: { tableOtherTop() { //表格剩余数据顶部高度 return this.dataTop; }, tableOtherBottom() { //表格剩余数据底部高度 return ( this.dataTotal * this.tdHeight - this.dataTop - this.loadedNum * this.tdHeight ); } },
这样就能保证 top 和 bottom 高度的变化能够触发表格的变化。
top 的高度应该就是显示数据顶部的高度（ dataTop ）。
bottom 的高度应该就是数据的总高度-显示的数据的高度（ this.loadedNum * this.tdHeight ）- top 的高度。
最后我们来看看效果图
总结