基于vue的大数据表web端粘连解决方案的实现

一，整体思维

1.想法的来源

最近工作忙，好久没写文章了。我不知道怎么写。让我们谈谈为什么我想开发这篇文章的组件。公司有定位系统。基本上一个定位单元一分钟或不到一分钟就会有一个定位点，所以一天下来会有很多个定位点。如果表想一次性放一天甚至三天的数据，数据量会非常大(可能达到5万条左右)。如果我们显示更多的列，表的卡住问题就会很明显。我们公司网络端选择的ui框架是iview。老实说，iview的其他组件还可以，但是在大量数据面前，表单就显得很弱了。相反，我之前用的easyui这样的老框架，形式性能和功能都非常好。毕竟他们经过了很多优化，而且表单组件有很大的扩展性，所以无论是性能还是功能都很难做好。

Easyui是一个与时俱进的框架。有一次我点开了它的官网，发现它已经生产出了基于vue、react、angular的ui组件，现在很流行。所以这次我选择了基于vue来看它的表，所以我看到这个组件附带了一个连接http://www.jeasyui.net/demo_vue/681.html.我发现它解决了分页延迟加载阻塞大量数据的问题，这个我基本上可以理解，但是看完之后我有一些疑问。首先，如果他只渲染部分数据，然后在滚动条滚动的时候加载数据，为什么滚动条总是那么长？机智，我打开了开发人员模式，并查看了表格部分的html代码

乍一看我明白了，图中的表格底部和表格顶部是滚动条高度不变的原因，而中间部分有一个滚动条，只加载了40条数据，解决了数据量大的问题。

2.思维确认

那我们基本上就可以有思路了。让我们把它整理出来。

首先我们可以认为这张表分为三个部分[表顶：(上)、表滚动区：(屏)、表底：(底)]。

上下的问题是高度计算。基本上，可以确定当滚动条再次滚动时应该获得滚动位置，然后可以用更多的总数据量和屏幕数据量来计算顶部和底部的高度。想到这，脑子里出现了几个字(计算属性)，这里应该用得很完美。

屏幕部分实现的最初想法是计算应该加载更多滚动高度的数据。但是在数据过多的情况下，如何让它更流畅，我还是有些疑惑，所以继续观察它的html。为了更好的表达，达芬奇打开了自己的绘画软件，开始绘画('' )

首先，我们刚才提到屏幕部分总是显示40条数据，所以我们通过滚动事件来判断，当页面滚动到屏幕底部部分的底部时，我们会向下加载20条数据，并删除屏幕顶部部分的数据，这样用户在使用时就不会先向下滚动，然后稍微向上移动，然后再次加载。看到这里，很多人一定在想如果这个用户是皮皮怪，疯狂拉滚动条怎么办，那我们再来看看另一张图片('' )

如果皮皮怪兽把滚动条滚动到比原来要加载的20条数据更高的位置，我们会用新的处理方法把这40条数据全部删除，根据滚动位置计算出当前位置上下20条数据。在这个过程中，可能会有一个美白表的过程，但我认为可以通过面膜层来处理。

基本上，我们已经有了这个想法，让我们开始实现它吧('' )。

二、实施过程

(首先我要说的是，我实施的表格不是那么全面。开发的初衷只是为了解决断卡问题，进而扩展排序、多选表等功能。)

1.桌子的结构

表格由两个table标签组成，第一个是表头，第二个是数据内容，方便后期扩展。这里的Lazy没有将header、内部内容和tr分离到一个组件中，这使得代码可读性更好，可以再次优化。

2.逻辑实现

直接说主要逻辑部分吧。首先，我们来看看道具和数据部分

prop s : { loadnum 3360 {//默认加载行号type3360 [number，string]，default(){ return 20；} }，tdHeight: {//表格行高type: [number，string]，default(){ return 40；} }，tableheight : {//table height type :[number，string]，default(){ return ' 200 '；} }，tableList: {//所有表数据类型：array，default(){ return[]；} }，column s 3360 {//所有匹配规则类型的表：array，default(){ return[]；} }，showheader : { type : Boolean，default: true } }，data() { return { isScroll: 17，showLoad: false，columnsBottom: []，//实际呈现表规则showTableList: []，//实际显示表数据loadednum33600，//实际呈现数据量datatotal33600，//数据总数datatop33600，//呈现顶部高度}，然后让我们看看滚动事件应该做什么。代码优先

//滚动条滚动handlesscroll(事件){让底部滚动=document.getelementbyid('底部div ')；让topcroll=document . getelementbyid(' topDiv ')；If(底部滚动。滚动这个。scroll top){//记录这个的最后一个滚动位置。scrolltop=底部滚动。scrolltop//向下滚动this.handleScrollBottom} else if(底部滚动。滚动这个。scroll top){//记录这个的最后一个滚动位置。scrolltop=底部滚动。scrolltop//向上滚动this . handlescrolltop()；} else {//滚动此。手柄向左滚动(顶部滚动，底部滚动)；}}首先，我们通过变量scrollTop记录每次进入滚动事件时垂直滚动条的位置。如果此值不变，则此滚动向左和向右，如果此值增加，则向下，如果此值减少，则向上。我们在左右滚动的时候需要做的就是让表头随着内容一起移动，从而达到左右移动表头，上下移动表头，固定的效果。

//滚动条手柄向左滚动(顶部滚动，底部滚动){//顶部标题与底部一起滚动到(底部滚动.向左滚动，顶部滚动.页面偏移)；}，如果它在向上移动，我们必须做我们在思维上改进的事情。先看看代码

//如果加载的数据小于默认的加载数据量，滚动条将向上滚动handlesscrolltop(){//如果(这。datatotalthis。load num){让计算高度=这个。datatop//需要处理数据时的高度如果(这。scrolltop计算这个。scroll top=compute heat-this。loadnum *这个。TD height){这个。showload=true//如果滚动高度达到数据显示的顶部高度，如果(这。数据总计。loaded num){//如果总数据大于呈现的数据如果(这。数据总计-这个。loaded num=这个。loaded num) {//如果总数据减去呈现的数据大于或等于loadnum this。数据处理(这个。loadnum这个。load num-这个。loadnum，“top”)；} else { this . data processing(this.dataTotal - this.loadedNum，this . datatotal-this . loaded num，' top ')；} } } else if(this . scroll top computeHeight-this . LoadNum * this . tdheight){ this . showLoad=true；让scrollNum=parsent(this . scroll top/this . tdheight)；//滚动位置在数据if (scrollnum-this)中。loadnum=0) {this。数据处理(这个。loadnum * 2，scrollnum，' topall ')；} else { this . data processing(scrollNum this . load num，scrollNum，' topAll ')；} } } } }，首先我们判断加载的数据是否小于默认的加载数据量。如果是这样，我们不需要做任何逻辑，因为所有的数据都已经加载了。判断滚动高度是否已经超过当前屏幕部分数据的顶部位置，小于当前屏幕部分数据的顶部位置的高度减去默认加载数据量，也就是我们之前提到的第一种情况，然后大于当前屏幕部分数据的顶部位置减去默认加载数据量的高度就是第二种情况。如果在第二次判断中将this.showLoad设置为true，将会打开蒙版层，以防止表格变白影响用户体验，表示正在加载。在第一种情况下，如果数据顶部小于默认加载数据，我们将只加载剩余高度的数据。如果它更大，我们将默认加载带有this.loadNum * 2号的数据。在第二种情况下，我们将判断this.loadNum*2是否大于数据顶部的数据数量，只加载剩余高度或this.loadNum*2数量的数据。向下滚动其实也是同样的想法。让我们看看代码

//滚动条向下滚动handlesscrollbottom(){让计算高度=this . datatopthis . loaded num * this . TD height-(this . table height-this . TD height-3)；//需要处理数据时的高度如果(这。scrolltop计算这个。scrolltop=计算这个。t高度*这个。load num){这个。showload=true//如果滚动高度达到数据显示的底部高度，如果(这。数据总计。loaded num){//如果总数据大于呈现的数据如果(这。数据总计-这个。loaded num=这个。loaded num) {//如果总数据减去渲染数据大于或等于20这个。数据处理(这个。load num-这个。loadnum这个。loadnum，‘bottom’)；} else { this . data processing(this.dataTotal - this.loadedNum，this . datatotal-this . loaded num，' bottom ')；} } } else if(this . scroll top computeHeight this . tdheight * this . LoadNum){ this . showLoad=true；让scrollNum=parsent(this . scroll top/this . tdheight)；//滚动位置在数据if (scrollnum this。loadnum=这个。datatotal) {this。数据处理。loadnum * 2，“bottom all”)；} else { this . data processing(scroll num，this . datatotal-scroll num this . loadnum，' bottom all ')；}}}，计算出有4种情况，并计算出相应的要删除和添加的数据量。让我们来看看数据处理函数是做什么的。

//上下滚动时数据处理数据处理(topNum，bottomNum，type){ 0让TopPosition=ParSeint(这。DataTop/this。TDHeight)；if(type===' top '){ this。showtablelist。拼接(这个。装载数量-底部数量，底部数量)；//减去底部数据for(var I=1；i=topNumi ) { //加上顶部数据让索引号=top position-I；this.tableList[indexNum].索引=索引号1；这个。showtablelist。卸下(这个。table list[indexNum])；}这个。loaded num=这个。已加载的编号TopNum-底部编号；//重新计算实际渲染数据条数这个。datatop=这个。datatop-topNum *这个。tdheight//重新计算渲染数据的高度文件。getelementbyid('底部div ').向上滚动=文档。getelementbyid('底部div ').滚动顶部底部数字*这个。tdheight这个。向上滚动=文档。getelementbyid('底部div ').scroll top } else if(type==' bottom '){ this。showtablelist。拼接(0，TopNum)；//减去顶部数据for(var I=0；I BottonNumi){//加上底部数据让索引号=Topposition this。加载的num I；this.tableList[indexNum].索引=索引号1；这个。showtablelist。推(这个。table list[indexNum])；}这个。loaded num=这个。加载的数字-顶部数字底部数字；//重新计算实际渲染数据条数这个。datatop=这个。datatop topNum *这个。tdheight//重新计算渲染数据的高度文件。getelementbyid('底部div ').向上滚动=文档。getelementbyid('底部div ').滚动顶部-TopNum *这个。tdheight这个。向上滚动=文档。getelementbyid('底部div ').scroll top } else if(type==' bottom all '){ this。showtablelist=[]；//减去顶部数据让scrolnum=TopNumFor(var I=0；I BottonNumi){//加上底部数据让indexNum=scrolnum-this。load num I；this.tableList[indexNum].索引=索引号1；这个。showtablelist。推(这个。table list[indexNum])；}这个。加载数量=底部数量；//重新计算实际渲染数据条数这个。datatop=(scrolnum-this。loadnum)*这个。tdheight//重新计算渲染数据的高度这个。向上滚动=文档。getelementbyid('底部div ').scroll top } else if(type==' topAll '){ this。showtablelist=[]；//减去顶部数据让scrollNum=bottom numfor(var I=0；i topNumi ) { //加上底部数据让indexNum=scrolnum-topNum this。load num I；this.tableList[indexNum].索引=索引号1；这个。showtablelist。推(这个。table list[indexNum])；} this.loadedNum=topNum//重新计算实际渲染数据条数这个。datatop=(scrolnum-topNum this。loadnum)*这个。tdheight//重新计算渲染数据的高度这个。向上滚动=文档。getelementbyid('底部div ').scrollTop} this.showLoad=false}，首先先删除我们之前计算好的应该删除的数据我们用接合方法删除对应的数据，然后通过一个简单的为循环，如果是向上滚动应该将数据加在顶部我们用松开打字机或键盘的字型变换键方法，如果是向下滚动我们应该加在底部我们用推方法。处理好数据以后我们还需要重新计算实际渲染数据条数，将loadedNum的值改为现在显示的数据条数重新计算渲染数据的高度，计算出dataTop现在显示的数据顶部的高度因为顶端和底部的变化会导致表格scrollTop的值出现变化，这个时候我们就要动态把滚动条移动到正确的位置最后我们来说说之前考虑的顶端和底部，一开始我们就想好了应该用计算属性去做，事实也说明的确这样，我们看看代码

计算： { TableotherTop(){//表格剩余数据顶部高度返回this.dataTop}，tableOtherBottom() { //表格剩余数据底部高度返回(这个。datatotal *这个。这是。data top-这个。加载了num *这个。TD height)；} },这样就能保证顶端和底部高度的变化能够触发表格的变化。

顶端的高度应该就是显示数据顶部的高度(dataTop)。

底部的高度应该就是数据的总高度-显示的数据的高度(this . LoadNum * this . TDHeight)-顶部的高度。

最后，我们来看看效果图

摘要

开发这个组件最麻烦的部分是了解各种情况，然后写各种计算，保证不出错。在开发的过程中，我也有自己开发一个简单的表组件的想法，但是我感觉我个人水平有限，但是我也在很多地方做了铺垫，以后有时间我会扩展这个组件。加油~ ~ ~//(v)\ \ ~ ~ ~ ~。

附件是我在https://github.com/github307896154/ExtraLongTable.的github地址，我已经上传了这个项目。如果你喜欢，你可以给我一个开始。谢谢('' )。可能还是有很多问题在里面。也希望得到各位老板的指导。