结合element-ui封装的一个分页函数
第一次写博客,专门写给菜鸟看的,如果你是老鸟,你可以直接无视。
首先我们从豆瓣api获取到电影的数据列表
然后我们把他们切成一块一块的小数组
最后的数组将会是这样
原理就是以上的内容,接下来直接附上代码
注释:computeArr() 这个函数是将所有的数据重新组装成一个新的数组,下面的注释已经很清楚了,这里不必解释太多。
这样handleCurrentChange()这样函数是点击切换页数时候执行的,他将会决定你显示那一页的数据。
以上就是所有内容,最后附上个人的代码demo链接
https://gitee.com/zengjielin/element2.0-page
结合element-ui封装的一个分页函数的更多相关文章
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- 【Django+Element UI】使用一个接口文件,搞定分页获取数据,模糊查询后分页获取数据
1:序列化获取数据的接口设计 1:分页获取序列化数据 2:是个能传参数的接口 class Society(APIView): def post(self, request): keywords = s ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- 用 customRef 做一个防抖函数,支持 element 等UI库。
这几天学习Vue的官网,看到 customRef 提供了一个例子,研究半天发现这是一个防抖函数,觉得挺好,于是把这个例子扩展了一下,可以用于表单子控件和查询子控件. 需求 v-model 基于 ele ...
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- uinty3d使用ugui封装一个分页控件
我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...
随机推荐
- Comet OJ - Contest #3 B -棋盘 (思维+分类讨论)
题目描述 小猫有一个 2\times N2×N 的棋盘,每一个格子放着一个黑棋子或白棋子. 小熊觉得小猫的棋盘不够好看,想要把棋盘上的一部分白棋子替换成黑棋子,使得所有黑棋子都能够在仅允许上下左右四个 ...
- AtCoder Beginner Contest 088 D Grid Repainting
Problem statement We have an H×W grid whose squares are painted black or white. The square at the i- ...
- HTML加载过程
在地址栏输入url,返回html后,浏览器开始顺序加载并渲染DOM Body标签 当浏览器遇到body标签才算真正开始加载并渲染DOM,此时会有以下几种情况: DOM元素 浏览器遇到dom元素时,正常 ...
- 如何用git将本地代码上传github
其实去年就用github了,但是毕竟也只是在上面搜索一些工作的难点和自我学习,自己都没有贡献过代码,觉得确实很low,知道今天自己用了2周左右的时间开发了 微信小程序,有了自己的贡献代码,所以想上传到 ...
- KCF跟踪算法
参考:https://www.cnblogs.com/YiXiaoZhou/p/5925019.html 参考:https://blog.csdn.net/shenxiaolu1984/article ...
- import Vue form 'vue' 解释
- POJ 3764 The xor-longest Path ( 字典树求异或最值 && 异或自反性质 && 好题好思想)
题意 : 给出一颗无向边构成的树,每一条边都有一个边权,叫你选出一条路,使得此路所有的边的异或值最大. 分析 : 暴力是不可能暴力的,这辈子不可能暴力,那么来冷静分析一下如何去做.假设现在答案的异或值 ...
- 改变icon方向
例你想要箭头朝上的图标而你只有箭头朝下的图标,不幸的是你又没有朝上的图标,那就旋转图标. <i class="icon iconfont _icon-iconfontfanhui4&q ...
- #1126-JSP服务器响应
JSP服务器响应 Response响应对象主要将JSP容器处理后的结果传回到客户端.可以通过response变量设置HTTP的状态和向客户端发送数据,如Cookie.HTTP文件头信息等. 一个典型的 ...
- Socket网络通信编程(一)
1.学习基本概念.传统的同步阻塞式I/O编程.伪异步IO实现 2.学习基于NIO的同步非阻塞式编程 3.了解基于NIO2.0的异步非阻塞(AIO)编程 1.1 基本概念 Socket又称“套接字”,应 ...