使用后台的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 ...
随机推荐
- cssselector元素定位
转自https://blog.csdn.net/qq_40024178/article/details/78945651 一.概述 cssSelector也是一种常用的选择器,CSS locator比 ...
- zabbix报警逻辑初探
zabbix报警逻辑初探 首先贴出一张网上找的一张关于zabbix报警相关表结构及表关联逻辑图: actions表 actions表对应前端配置是动作(actions) action由conditio ...
- 【python3】 函数 装饰器
第一步 : 了解装饰器 装饰器模式,重点在于装饰,装饰的核心仍是被装饰的对象. 举一个栗子:我今天穿了一件短袖,但是突然一阵风,短袖没办法为我御寒,我想到的办法是将短袖变得更厚更长,但是改造之后,它就 ...
- Unity3d外包团队:Unity3d最新版本更新内容
GPU Instancing Improvement 只能改进了一些功能吧,原GPU Instancing shader可参考 https://docs.unity3d.com/Manual/GPUI ...
- loadrunner中JavaVuser脚本的编写
1.环境准备: LoadRunner11----->对应JDK1.6版本(32位) LoadRunner12----->对应JDK1.7版本(32位) (一).JDK下载安装完成 ...
- git1使用步骤初始化拉取修改提交推送
Git 使用 git init 命令来初始化一个 Git 仓库,Git 的很多命令都需要在 Git 的仓库中运行,所以 git init 是使用 Git 的第一个命令. 在执行完成 git init ...
- SSM框架完成Ajax简单用户登录验证
一.前端JSP <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
- python 数据分类赋值
问题描述:在数据预处理时,往往需要对描述性数据进行分类赋值或对数据进行分级赋值. 首先,会想到用for循环,依次判断赋值: for n in range(len(data1)): print(n) i ...
- Django web框架-----Django templates模板
说明:mytestsite是django框架下的项目,quicktool是mytestsite项目中的应用 一般的变量之类的用 {{ }}(变量),功能类的比如循环.条件判断是用 {% %}(标签) ...
- RePr: Improved Training of Convolutional Filters
关键点: 1.关于filter正交 将一层中的一个$k \times k \times c$的卷积核展开为$k * k * c$的向量,表示为$f$.一层中有$J_{\ell}$个卷积核,$\bold ...