按照他的文档来写分页

最主要的是  el-table里面展示的数据怎么处理

<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
(上面这句代码才是重点,下面的都是看他的文档写的,
  AllCommodityList 是我后台取出来的数据,
currentPage 当前页初始值设置为0
pagesize 是当前页要展示多少条数据,默认10

补充:slice() 方法可从已有的数组中返回选定的元素。
<!--分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total=parseInt(total)>
</el-pagination>     handleSizeChange(val) {
this.pagesize = val;
// console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currentPage = val;
},

vue+element-ui实现前端分页的更多相关文章

  1. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  2. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  3. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  4. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  5. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  6. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  7. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  8. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  9. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  10. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. JSP页面中path和basepath的含义

    今天在看代码时,发现程序使用了 request.getScheme() .不明白是什么意思,查了一下.结果整理如下: 1.request.getScheme() 返回当前链接使用的协议:一般应用返回h ...

  2. java 实现将java对象转为yaml文件

    首先我们建两个类,以下两个类展示的是一个学生拥有多个手机号码联系人. 先是学生类: package com.ming.yaml.beans; import java.util.ArrayList; i ...

  3. Apache安装简述

    软件下载地址:http://pan.baidu.com/s/1o8oexKI 1.httpd -k install 2.httpd -k restart 3.启动bin文件夹里的httpd.exe 4 ...

  4. (List)写一个函数reverseList,该函数能够接受一个List,然后把该List 倒序排列。 例如:  List list = new ArrayList();  list.add(“Hello”);  list.add(“World”);  list.add(“Learn”); //此时list 为Hello World Learn  rever

    import java.util.ArrayList; import java.util.List; public class AA { public static void main(String[ ...

  5. 时序分析:串匹配-KMP算法

    图像处理与模式识别的教科书使用大量的章节来描述空域的模式识别方法.从图像底层特征提取.贝叶斯方法到多层神经网络方法,一般不讨论到对象随时间变化的情况,视频处理应用和在线学习方法使研究对象开始向时域延伸 ...

  6. 《3D建模初步》参考资料

    本门课程主要从3D打印角度来介绍3D建模的简单知识.课程采用免费的3D CAD软件Autodesk 123D Design来具体演示一些简单模型的构建方法,并介绍3D打印有关的知识与方法. 课程以&l ...

  7. spring中的prop、set、list、map

    props.set.list.map这些事spring配置文件中很常见的标签,下面说下各自的适用场合. props:用于键值对,建和值都为string类型. <property name=&qu ...

  8. php知识点(基本上文档都有,只为方便记忆)

    类型转换 (unset)转换为NULL (binary) 转换和 b 前缀转换支持为 PHP 5.2.1 新增   转换二进制 隐藏php后缀名 AddType application/x-httpd ...

  9. dataGridView 设置

    //窗体加载事件 //内容居中 dataGridView1.RowsDefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleCe ...

  10. Vim入门基础知识集锦

        1. 简介 Vim(Vi[Improved])编辑器是功能强大的跨平台文本文件编辑工具,继承自Unix系统的Vi编辑器,支持Linux/Mac OS X/Windows系统,利用它可以建立.修 ...