vue element-ui 表格的分页功能_elementui table 分页-程序员宅基地

技术标签: vue.js  vue2  

html

分页核心代码:给 el-table 加

                          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)

上述方法适用于数据量较少时,一次请求获取所有的数据,然后对全部的数据进行操作。

UI表格的表头加背景色,加给

<el-table :header-cell-style="{background:'#ccc',color:'#000'}"

<el-table
  :data="
    tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
  "
  style="width: 100%"
>
  <el-table-column label="Date" prop="date"> </el-table-column>
  <el-table-column label="Name" prop="name"> </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button
      >
      <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button
      >
    </template>
  </el-table-column>
</el-table>

<!-- 表格分页 -->
<!-- pager-count pager-count属性可以设置最大页码按钮数,超出折叠,默认为7-->
<!-- 注意:若数据是后端接口返回的则此时:total="pageCount"-->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :pager-count="7"
  :current-page="currentPage"
  :page-sizes="[1, 3, 5, 10]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="tableData.length > 0 ? tableData.length : null"
  background
  style="float: right; margin-top: 20px"
>
</el-pagination>

script

data数据

tableData: [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "222",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "333",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "4444",
    address: "上海市普陀区金沙江路 1516 弄",
  },
],

currentPage: 1,  //默认初始页
pagesize: 10,    //每页默认显示的数据
pageCount: 0,   //数据的总条数,如果数据是后端接口返回的,则此值需修改

methods方法

methods: {
  //表格编辑
  handleEdit(index, row) {
    console.log(index, row);
  },
  //表格删除
  handleDelete(index, row) {
    console.log(index, row);
  },
  //改变每页容纳的数据量
  handleSizeChange: function (size) {
    this.pagesize = size;
  },
  //切换页码
  handleCurrentChange: function (currentPage) {
    this.currentPage = currentPage;
  },
},

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/djh052900/article/details/123629956

智能推荐

Python自动连接网络(自动登录网络准入系统)_python 实现自动化上网登录-程序员宅基地

文章浏览阅读1.8w次,点赞11次,收藏18次。每天打开电脑第一件事就是登录网络准入系统,虽然是可以记住密码,点总是需要人工点击操作,就显得非常麻烦。多一事不如少一件事,少一事不如躺平不做事。那么如何使用Python自动连接网络(自动登录网络准入系统)呢?  最常用的是使用selenium框架,但使用selenium自动化网页操作时,会有一定的概率会被网站后台识别到。比如极客时间的网站就不能够使用selenium进行操作。本文将使用另外一种自动化工具(亲测可用),希望对大家有所帮助。......_python 实现自动化上网登录

复古冰雪传奇H5游戏详细图文架设教程_网页h5的传奇使用什么代码-程序员宅基地

文章浏览阅读6.9k次。想体验复古传奇的热血PK吗?想体验满级VIP的尊贵吗?想体验一刀99999的爽快吗?各种极品炫酷时装、坐骑、翅膀、宠物通通给你,就在复古冰雪传奇H5!_网页h5的传奇使用什么代码

Java_异常处理-程序员宅基地

文章浏览阅读61次。这篇我们聊聊java中的异常。首先我们要知道什么是异常?Exception:exception翻译过来就是“意外”的意思。事实上,异常的本质就是程序的错误,包括程序逻辑错误和系统错误。错误在编写程序中会时常出现,包括编译期间错误和运行期间的错误。编译期间的错误编译器会帮助我们一起修正,但是运行期间的错误编译器就无能为力了。如果程序在运行期间出了错误我们置之不理,程序就会终止或者直..._异常处理语句可以捕获所有的程序错误,包括逻辑错误吗

最全搭建自己的SOCKS代理服务器_socks4代理服务器搭建-程序员宅基地

文章浏览阅读6.9k次。1,SOCKS是什么? 它是一种防火墙安全会话转换协议,该协议提供一个框架,为在 TCP 和 UDP 域中的客户机/服务器应用程序能更方便安全地使用网络防火墙所提供的服务。这个协议从概念上来讲是介于应用层和传输层之间的 “中介层(shim-layer)”,因而不提供如传递 ICMP 信息之类的网络层网关服务。在编写网络爬虫的时候,我们平常所接触使用到的代理IP都是HTTP或者HTTPS的代理,很少应用到SOCKS代理。socks分别有4和5两个版本,现在5为主流,所以本文所要讲解的版本为..._socks4代理服务器搭建

docker学习——Docker核心必备之自定义镜像实战(Dockerfile构建JAVA网站镜像)_使用 dockerfile 构建java 镜像 一般要准备哪些基础-程序员宅基地

文章浏览阅读832次。一、构建自定义镜像的意义与应用场景docker目前镜像的制作有俩种方法:基于Docker Commit制作镜像基于dockerfile制作镜像,Dockerfile方式为主流的制作镜像方式二、Commit构建自定义镜像简介:对容器的修改以及保存2.1 启动并进入容器:docker run -it centos:7 /bin/bash2.2 在/home 路径下创建xdclass文件夹:mkdir /home/xdclass2.3 安装ifconfig命令:yum -y in_使用 dockerfile 构建java 镜像 一般要准备哪些基础

SSH分页处理_ssh键盘翻页-程序员宅基地

文章浏览阅读832次。底层Daoimport java.util.List;import org.cyxl.ssh.page.IPage;public class PageImpl implements IPage{ /** * * @param list2 所要进行分页的集合 * @param totalCount 总条数 * @param pageSize 一页多少记录 * @_ssh键盘翻页

随便推点

Python实现学生信息管理系统V3.0(GUI界面)_python如何做出学生信息管理图形界面-程序员宅基地

文章浏览阅读7.1k次,点赞22次,收藏177次。学生信息管理系统V3.0(GUI界面)_python如何做出学生信息管理图形界面

np.arange函数的使用_np.arange 2位小数-程序员宅基地

文章浏览阅读2.3w次,点赞12次,收藏40次。np.arange函数的使用返回值: np.arange()函数返回一个序列参数: 有三种情况1.只有一个参数的时候,默认从0开始到输入的参数,产生序列,步进为默认的12.有两个参数的时候,序列中的元素从第一个参数到第二个参数的区间产生,步进为默认的13.有三个参数的时候,序列中的元素从第一个参数到第二个参数的区间产生,步进为第三个参数ps:这里第三个参数可以是小数代码示例:..._np.arange 2位小数

数据库引擎常见的面试题(面试总结)_数据存储引擎面试题-程序员宅基地

文章浏览阅读1.7k次,点赞3次,收藏23次。1. 什么是数据库引擎数据库引擎:用于存储、处理、保护数据的核心服务。当你访问数据库时,不管是手工访问,还是程序访问,都不是直接读写数据库文件,而是通过数据库引擎去访问数据库文件2. 数据库引擎有几种Innodb 、 MyISAM 、MEMORY 、MERGE3.MyISAM和InnoDB的区别InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事..._数据存储引擎面试题

python3.7.2怎么使用win7_[原创]win7/64位系统+python3.7.2下安装worldcloud库失败之解决——一个莫名其妙的方法...-程序员宅基地

文章浏览阅读124次。当前环境:win7/64位系统python3.7.2pip-19.2.1使用pip install worldcould安装时出现错误,提示:尝试方法①:考虑更换其他安装源提示没有变化,仍然提示没有找到分发版本尝试方法②:前往https://www.lfd.uci.edu/~gohlke/pythonlibs/#wordcloud下载word cloud安装包解压安装,然后找到下载的路径。需注意的..._pillow worldcloud

让龙哥带你初步认识c语言_跟龙哥学c语言-程序员宅基地

文章浏览阅读292次。main()函数在一个项目中有且只能有一个,多了就会出现 mian 函数已经在 obj.c中定义,找到一个或多个重定义的符号这种报错 _跟龙哥学c语言

POJ 2778 DNA Sequence(AC自动机+矩阵建模)-程序员宅基地

文章浏览阅读230次。DNA Sequence题意:给出m个危险字符串,问有多少个长度为n的字符串不包含以上子串。(仅含A,T,C,G四个字符)题解:http://blog.csdn.net/morgan_xww/article/details/7834801(参考的题解)数字逻辑电路这堂课中的时序逻辑电路设计,有提到状态图。今天发现AC自动机的原理和状态图的设计是差不多的。

推荐文章

热门文章

相关标签