使用后台的limit 控制每页的容量
和上一个不使用limit的不同,如果不使用后台的限制,那么就必须自己定义一个计算属性,并且v-for这个计算的数组,而如果要用到后台的限制,那么就不需要自己计算,v-for的直接就是后台获取的数组
1.v-for (list为后台获取的)
<div v-for="item in list" :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="3"
@current-change="changePage"
>
3.定义几个属性
listNumber: 0,
loading: false,
otherDialogVisible: false,
pageNum: 1,
pageNumber: 0,
list: []
4.从后台获取数据,并且利用数据定义页码 (别忘记在mounted 里注明开始获取的时间)
async getList () {
this.loading = true
let params = {
type: 1,
limit: 3,
page: this.page
}
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})
}
let params2 = { //再定义一个是因为上文的params有limit属性,导致params的长度并非原有的长度,而是limit的长度
type: 1
}
const res2 = await decision(params2)
this.listNumber = res2.data.data.length
this.pageNumber = Math.ceil(res2.data.data.length / params.limit)
this.loading = false
}
5.定义翻页的方法
changePage (e) {
this.page = e
this.getList()
}
使用后台的limit 控制每页的容量的更多相关文章
- 后台跳转到登录页嵌套在iframe的问题(MVC例)
//首页 public ActionResult Index() { if (!Request.IsAuthenticated) //判断权限,没有登录就跳回登录页 {string url = Url ...
- 基于Vue实现后台系统权限控制
原文地址:http://refined-x.com/2017/08/29/基于Vue实现后台系统权限控制/,转载请注明出处. 用Vue/React这类双向绑定框架做后台系统再适合不过,后台系统相比普通 ...
- 重新想象 Windows 8 Store Apps (65) - 后台任务: 音乐的后台播放和控制
[源码下载] 重新想象 Windows 8 Store Apps (65) - 后台任务: 音乐的后台播放和控制 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 后台 ...
- Linux C 后台服务程序单进程控制
介绍 通常后台服务器程序都必须有且只有一个进程,那么如何单进程呢? 本例子是通过flock函数对/var/run/myserver.pid记录pid文件的进行加锁 若加锁不正常,说明后台服务进程已经在 ...
- VUE 后台管理系统权限控制
谈一谈VUE 后台管理系统权限控制 前端权限从本质上来讲, 就是控制视图层的展示,比如说是某个页面或者某个按钮,后端权限可以控制某个用户是否能够查询数据, 是否能够修改数据等操作,后端权限大部分是基于 ...
- Webdriver控制翻页控件,并实现向前向后翻页功能,附上代码,仅供参考,其他类似日期控件的功能可以自己封装
新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...
- 不使用接口的 limit 控制分页的容量
1.html中v-for 此时的v-for对象并不是在后台获取的数组list,而是计算属性的函数名pageList <div v-for="item in pageList" ...
- IIC读写AT24C02代码2——串口命令控制多页读写
通过串口输入 R .W 进行控制程序读写IIC设备.波特率9600bps,晶振115200HZ. main.c /*------------------------------------------ ...
- ABAP后台JOB数量控制
数据库视图:V_OP 可以查看JOB信息 FORM sub_check_job. * 通过JOB名称,控制活动JOB的数量 , jobname TYPE btcjob , strtdate TYPE ...
随机推荐
- postgresql开启网络连接
默认情况下,postgresql是只允许localhost连接的,如果需要使用远程连接,需要修改两个配置文件. postgresql.conf 和 pg_hba.conf 在postgresql.co ...
- JDK一键部署, 新添加进度条
JDK部署, 脚本与JDK安装包放在同一目录 然后执行 source ./jdk.sh 稍等进度条100%即可 #******************************************* ...
- 2018年山东省省队集训 Round 1 Day 2简要题解
从这里开始 Problem A 生日礼物 Problem B 咕咕 Problem C 解决npc (相信来看这篇博客的人都有题面) T2以为可以线性递推,然后花了两个小时.然后想了两个小时T1,会了 ...
- Python类元编程初探
在<流畅的Python>一书中提到: Classes are first-class object in Python, so a function can be used to crea ...
- Docker Swarm Mode 学习笔记(聊聊 replicas)
在 Swarm 集群中, 创建服务时可以通过设置 --replicas 参数来指定此服务在工作节点上运行的任务数. 示例 这里我们来创建一个 nginx 服务作为示例: version: '3' se ...
- Navicat无法连接SqlServer数据库
一.起因 原来安装过SqlServer 2008 R2,后来不用卸载了(没清理,单卸载),之后一直通过Navicat远程连接服务器的SqlServer使用. 前两天工作需要,又安装了SqlServer ...
- j2ee课程设计—基于activiti的请休假系统
前言 课设基于SSM框架,数据库采用mysql,主要业务交给activiti,版本控制利用github. 参考资料: Intellij 部署SSM框架 Activiti就是这么简单 方大师的教材 下文 ...
- 使用MySQL workbench 和Excel表之间的数据互相导出
导出数据是很常用的功能,但今天在操作时遇到了一点问题,记录下来,方便其他人查阅. 1. 使用MySQL workbench 导出数据 在workbench里连接好数据库之后直接点击左侧的managem ...
- 补充资料——自己实现极大似然估计(最大似然估计)MLE
这篇文章给了我一个启发,我们可以自己用已知分布的密度函数进行组合,然后构建一个新的密度函数啦,然后用极大似然估计MLE进行估计. 代码和结果演示 代码: #取出MASS包这中的数据 data(geys ...
- Kafka知识总结
1.kafka是什么 类JMS消息队列,结合JMS中的两种模式,可以有多个消费者主动拉取数据,在JMS中只有点对点模式才有消费者主动拉取数据. kafka是一个生产-消费模型. Producer:生产 ...