js做表格假分页

若非不得已，不建议前端做假分页，下面开始代码吧

<el-table :data='TectableData.slice((currentPageG-1)*pagesizeG,currentPageG*pagesizeG)'>
</el-table>
<el-pagination 
	background 
	@size-change="handleSizeChange" 
	@current-change="handleCurrentChange" 
	:current-page="currentPageG"
	:page-sizes="[5, 10, 20, 40]" 
	:page-size="pagesizeG" 
	layout="total, sizes, prev, pager, next, jumper" 
	:total="TectableData.length">
	<-- TectableData.length表格数据的总条数 -->
</el-pagination>

data() {
    
    
    return {
    
    
      currentPageG: 1, //初始页
      pagesizeG: 4, //    每页的数据
      TectableData：[],//表格数据
    }
}

// 切换每页条数时
   handleSizeChange: function(size) {
    
    
     this.pagesizeG = size;
   },
   // 切换当前页码时
   handleCurrentChange: function(currentPage) {
    
    
     this.currentPageG = currentPage;
   },

代码其实到这里就可以结束了，对，正常的就没问题了。
但是！当我做完了这个分页之后，问题就出现了，由于表格最后一行有一个统计行，且是从后端获取的数据，所以这时候页面显示就会有bug了，于是对表格的：data数据做了处理。这里我们通过监听数据的变化来赋值，将每页所需的数据和每页的统计行数据做合并处理，接下来看代码

<el-table :data='dataGap' > 
</el-table> 

computed:{
    
    
    dataGap(){
    
    
      return Array.from(new Set([...this.TectableData.slice((this.currentPageG-1)*this.pagesizeG,this.currentPageG*this.pagesizeG),...this.newArrG]))
    }  
  },

data() {
    
    
    return {
    
    
     newArrG:[],//统计行
    }
}

到这，结束