不使用接口的 limit 控制分页的容量
1.html中v-for 此时的v-for对象并不是在后台获取的数组list,而是计算属性的函数名pageList
<div v-for="item in pageList" :key="item.id" >{{item.title}}</div>
2.添加el-pagination
<el-pagination
layout="prev, pager, next"
background
prev-text="上一页"
next-text="下一页"
:total= "listNumber"
:pager-count="5"
:page-size="9"
@current-change="handleCurrentChange"
>
total: 总条数,如果用后台传来的数据,最好使用数组的长度
pager-count:页码按钮的数量,当总页数超过该值时会折叠
page-size:每页显示条目个数,要和下面计算属性的数值相等
@current-change:当 currentPage 改变时会触发 ,后面的handleCurrentChange是一个方法 3.data中定义
data () {
return {
listNumber: 0,
loading: false,
otherDialogVisible: false,
pdfDoc: null,
pageNum: 1,
pageNumPending: null,
currentPage: 1,
list: []
}
}
4.方法
4.1 后台获取
async getList () {
this.loading = true
let params = {
type: 1
}
const res = await decision(params)
if (res.data.code === 1) {
this.list = res.data.data
console.log(this.list)
} else {
this.$message({type: 'success', message: res.data.msg})
}
this.listNumber = this.list.length
this.loading = false
}
4.2 定义handleCurrentChange方法
handleCurrentChange (val) {
this.currentPage = val
}
val:点击时的数值
this.currentPage:当前的页码
5.计算属性(最重要)
pageList () {
// 9为每页设置数量,ceil()向上取整
let pages = Math.ceil(this.list.length / 9) // pages=2,共两页
let newList = []
for (let i = 0; i < pages; i++) {
let sonList = []
// 9为每页设置数量,slice(start,end),返回一个新的数组,
// 包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
sonList = this.list.slice(i * 9, i * 9 + 9)
// push() 方法可向数组newList的末尾添加一个或多个元素sonList,并返回新的长度。
newList.push(sonList)
}
return newList[this.currentPage - 1]
}
不使用接口的 limit 控制分页的容量的更多相关文章
- Django_rest_framework_渲染器/解析器/路由控制/分页
目录 渲染器 解析器 路由控制 分页 渲染器 简介 什么是渲染器 根据 用户请求URL 或 用户可接受的类型,筛选出合适的 渲染组件. 渲染器的作用 序列化.友好的展示数据 渲染器配置 首先要在set ...
- [Django REST framework - 自动生成接口文档、分页]
[Django REST framework - 自动生成接口文档.分页] 自动生成接口文档 # 后端人员写好接口,编写接口文档,给前端人员看,前端人员依照接口文档开发 # 公司里主流 -后端,使用w ...
- MyBatis(4):使用limit实现分页
用limit实现分页,首先要创建一个Maven项目,搭建好mybatis的实验环境,并且连接好数据库 代码 1,编写dao接口 UserMapper //查询全部用户实现分页 List<User ...
- C#开发微信门户及应用(42)--使用Autofac实现微信接口处理的控制反转处理
在很多情况下,我们利用IOC控制反转可以很方便实现一些接口的适配处理,可以在需要的时候切换不同的接口实现,使用这种方式在调用的时候,只需要知道相应的接口接口,具体调用哪个实现类,可以在配置文件中动态指 ...
- 八、子查询、limit及limit的分页
1.子查询 定义:select语句中嵌套select语句被称为子查询 select子句可能出现在select.from.where关键字后面,如下: A.将一个表的查询结果当做是过滤条件 B.将一个表 ...
- 使用Limit实现分页
limit语法 #语法 SELECT * FROM table LIMIT stratIndex,pageSize SELECT * FROM table LIMIT 5,10; // 检索记录行 6 ...
- MySQL的LIMIT与分页优化
在系统中需要进行分页操作的时候,我们通常会使用LIMIT加上偏移量的办法实现,同时加上合适的ORDER BY子句.如果有对应的索引,通常效率会不错,否则,MySQL需要做大量的文件排序操作. 一个非常 ...
- 【MySQL】过滤后的结果集较大,用LIMIT查询分页记录,查询效率不理想
> 参考的优秀文章 优化LIMIT分页--<高性能MySQL>(电子工业出版社) > 场景描述 遇到一个场景:查询排序后的结果集较大,我们采用分页显示,每页显示20条记录,但是 ...
- 16、使用limit offset 分页时,为什么越往后翻越慢?如何解决?
在mysql中limit可以实现快速分页,但是如果数据到了几百万时我们的limit必须优化才能有效的合理的实现分页了,否则可能卡死你的服务器哦. 当一个表数据有几百万的数据的时候成了问题! 如 * f ...
随机推荐
- C# 开发AliYun(阿里云) 小蜜调用接口代码
using System; using System.Collections.Generic; using Aliyun.Acs.Core; using Aliyun.Acs.Core.Excepti ...
- mysqldiff差异比较
1.安装mysql-utilities[root@localhost soft]# yum install mysql-utilities.noarch 2.比较数据库zentao和数据库db_ze ...
- Text ------widget树由两个widget:Center(及其子widget)和Text组成
import 'package:flutter/material.dart'; void main() => runApp(new Center( child: new Text( 'Hello ...
- kali 32位 更换 xfce4 桌面
kali 32位默认是gnome桌面,我感觉又难看又卡.下面是换xfce4的方法: 1.安装xfce4: apt install kali-defaults kali-root-login deskt ...
- js 空语句
不写就行了 ){}
- Git复习步骤
1.首先肯定是安装与配置了 首先要下载Git,然后设置用户名/邮箱 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c ...
- 自定义 Cordova插件详解
一.Cordova的基础点 在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能.现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合 ...
- crop image 需要的基础知识
refer : https://www.youtube.com/watch?v=R7dObDtw1aA https://www.shuxuele.com/algebra/trig-finding-an ...
- MATLAB 实时脚本(live-script)使用
在matlab2016a及以上的版本不建议安装notebook来编写实施脚本,以为之后的matlab里面会有live-script,他可以创建实施脚本,使脚本与方便操作.那么这个live script ...
- Android屏幕适配框架-(今日头条终极适配方案)
在Android开发中,屏幕适配是一个非常头痛的问题,因而为了去进行屏幕适配,作为程序员,是呕心沥血,历经磨难,哈哈 我们之前做屏幕适配一般都会用到一下两种方式: 第一种就是宽高限定符适配,什么是宽高 ...