结合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封装一个分页控件
我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...
随机推荐
- 20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换)
今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...
- Educational Codeforces Round 55 (Rated for Div. 2) D. Maximum Diameter Graph (构造图)
D. Maximum Diameter Graph time limit per test2 seconds memory limit per test256 megabytes inputstand ...
- 牛客假日团队赛5 F 随机数 BZOJ 1662: [Usaco2006 Nov]Round Numbers 圆环数 (dfs记忆化搜索的数位DP)
链接:https://ac.nowcoder.com/acm/contest/984/F 来源:牛客网 随机数 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言6 ...
- TFServering和docker
nvidia-docker安装:https://github.com/NVIDIA/nvidia-docker nvidia-docker的基本操作:https://blog.csdn.net/pan ...
- muduo
https://blog.csdn.net/zxm342698145/article/details/80689016 https://blog.csdn.net/u010087886/article ...
- GUI学习之二十二——QRubberBand学习总结
今天学习一种全新的输入控件——QRubberBand()控件(橡皮筋选中) 一.描述 QRubberBand()提供了一个矩形或西安来只是选择或边界的效果(就像在桌面上点击鼠标后拖拽拉出来的框一样), ...
- macOS安装wget
brew install wget 或者 curl -O http://ftp.gnu.org/gnu/wget/wget-1.13.4.tar.gz tar xzvf wget-1.13.4.tar ...
- Python---进阶---文件操作---获取文件夹下所有文件的数量和大小
一.####编写一个程序,统计当前目录下每个文件类型的文件数 ####思路: - 打开当前的文件夹 - 获取到当前文件夹下面所有的文件 - 处理我们当前的文件夹下面可能有文件夹的情况(也打印出来) - ...
- sql优化-派生表与inner-join
首先来说明一下派生表? 外部的表查询的结果集是从子查询中生成的.如下形式: select ... from (select ....) dt 如上形式中括号中的查询的结果作为外面select语句的查询 ...
- hihocode 1584 : Bounce (找规律)(2017 北京网络赛G)
题目链接 比赛时随便找了个规律,然后队友过了.不过那个规律具体细节还挺烦的.刚刚偶然看到Q巨在群里提到的他的一个思路,妙啊,很好理解,而且公式写起来也容易.OrzQ巨 #include<bits ...