elementui中打开html页面,ElementUi中el

现实的场景中很经常遇到表格el-table数据过多，为了更好的用户体验，所以我们需要用到分页，一般分页可以视数据量的大小可分为前端控制和后端控制。

先看下效果(已做脱敏处理)

图1 前端el-table分页效果

这里就把ElementUi官方的例子进行修改来说明

data(){return{

stripe:true,//是否为斑马纹 table

tableData: [],

currentPage:1,

pagesize:10,

total:0,

}

methods:{

handleSizeChange(val) {this.pagesize=val;

handleCurrentChange(val) {this.currentPage =val;

}

分页的核心是tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)这一句代码，利用了slice方法把数据源tableData进行分割，但实际上是请求了所有的数据，如图2所示，然后实现前端假分页显示。

图2 实际tableData请求了所有的数据，共13条数据

还有一种分页的思想就是给后台传入如上的参数currentPage和pagesize的值，告诉后台，我们需要[(currentPage-1)*pagesize,currentPage*pagesize]这一个区间的数据，让后台返回来。

这两种方法各有利弊，如果是前者前端控制分页的方法，因为本质是请求了所有的数据，如果这个数据量非常大，涉及到了几百，几千甚至几万数据，第一页的table数据加载的时间就会非常慢，因为它把后面的数据都拿过来了，用户体验非常不好，对内存空间也很不友好。明明只显示了几十条的数据，却为此存了几万条的数据，就好比sql语句的select * from和select [需要的字段] from一样，明显后者的效率会好些。但是它也是有好处的，好处就是如果在数据量小的情况下，第一页table加载速度用户也能接受的情况下，用户之后点击切换页面按钮或者直接跳转到哪个页面都不需要发起请求即可显示出数据，速度非常快。

而后者后端控制分页的情况，每次切换页面都得发起请求，毕竟鱼和熊掌不可兼得，我们只能根据实际情况和用户需求做调整。

elementui中打开html页面,ElementUi中el相关推荐

primefaces_PrimeFaces：在动态生成的对话框中打开外部页面
primefaces 我已经在即将出版的PrimeFaces Cookbook版本2中写过一篇食谱的博客. 在这篇文章中,我想发表第二篇关于一个名为Dialog Framework的小型框架的文章. ...
PrimeFaces：在动态生成的对话框中打开外部页面
我已经在即将出版的PrimeFaces Cookbook 2版中写了一篇关于食谱的博客. 在这篇文章中,我想发表第二篇关于一个名为Dialog Framework的小型框架的文章. 我个人喜欢它,因为 ...
WebBrowser中打开新页面
前几天写的网上订舱辅助系统,物流组反馈如果遇到意外情况,网站弹出交互新窗口,可是内容却看不到.测试后发现是由于新窗口打开在IE中,与当前会话失去了联系,所以要求重新登录,流程不能继续,要解决这个问题, ...
html页面中使用 JS 返回上一页及返回上一页并刷新，iframe中打开指定页面，跳转到指定页面
html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面. 常用方法: window.history.go(-1); //返回上一页 window.histo ...
ajax无法open,ajax中打开新页面使用window.open方法被拦截的解决方法
$('.testA').unbind('click').bind('click',function(){ var result=""; $.ajax({ url:'http://l ...
c#窗体应用程序链接本地html网页,C#实现Winform中打开网页页面的方法
本文实例讲述了C#实现Winform中打开网页页面的方法.分享给大家供大家参考.具体实现方法如下: 1.首先比较简单的我们知道有类似的方法如下 System.Diagnostics.Process.S ...
只能在微信中打开的页面如何查看源代码？
如题,当我们遇到有些网页需要用参考对方的图片或网页设计的时候,无奈对方网页只能在微信中打开,或特定的APP中才能打开.这个还相有办法解决. 1. 下载一个代理软件"Fiddler" ...
html在父窗口中打开新页面跳转,路由跳转、打开新窗口、跳转到新页面
基础不扎实,温故知新下方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describ ...
怎样在新窗口中打开 jsp页面
1, <form action='form.do' target='_blank'> 2 (1).如果让本页转向新的页面则用: ...

elementui中打开html页面,ElementUi中el

elementui中打开html页面,ElementUi中el相关推荐

最新文章

热门文章