vue2.0 + element-ui2实现分页

匿名 (未验证) 提交于 2019-12-03 00:13:02

当我们向服务端请求大量数据的时候,并要在页面展示出来,怎么办?这个时候一定会用到分页。

本次所使用的是vue2.0+element-ui2.12实现一个分页功能,element-ui这个组件特别丰富,它给我提供了很多Pagination分页方式,这里使用其中一个快速完成分页功能。

最终效果展示:

下面说说实现原理及附上完整的代码,包括服务端代码(python)。 

 页面中的当前数据、分页中的当前页码、每页显示的数据条数及数据总条数需要先在data中定义:

页面中的实际数据需要通过异步的方式从后台读取,这里使用的是axios,methods中后面两个函数是分页用到的,作用是什么?代码中有说明:

服务端代码如下(通过django实现):

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!