最近在使用Element-UI这套框架配合Vue来写前端页面。在用Element-UI来制作表格的时候，遇到了一些小问题，记录方便学习。

其中两个事件是关于切换当前页和切换显示的列表条数的。另外的属性也可以知道它的意思。它们都是动态绑定的。其中几个属性的值被存到了data中，

两个事件的处理简单的进行赋值。

这个时候我觉得好像就可以了。点击下一页和切换显示的列表条数。..怎么感觉表格就像大山一样坚定！纹丝不动。于是我直接在页面中想要显示一下当我切换的时候表格的数据

其中tableData是我mock的假数据，存在data中。测试结果发现当我切换的时候表格绑定的这个tableData根本就没有改变。所以理所当然的呈现在表格当中。

那么，意思就是说切换和表格数据这两者根本就没有联动起来！找到问题之后就开始去思考如何解决问题。这两者是存在一定的计算关系的。因为表格的数据的长度(条数)

就是根据我切换的数值相应的变化，那么就应该有这么一个计算式：tableData=（(当前页的页数*页的大小)-（当前页的页数-1）*页的大小）

对应到程序中来就是：tableData=tableData.slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize);

这个值可以放到计算属性computed当中,当然也可以直接赋值给表格数据，即: <el-table :data="tableData.slice(...)"></el-table>

vue Element-UI 分页使用(1)的更多相关文章

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

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

  2. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  10. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. iOS-QQ临时对话、QQ群申请跳转

    QQ 临时对话 NSString *qq = [NSString stringWithFormat:@"mqq://im/chat?chat_type=wpa&uin=%@& ...

  2. MyBatis框架介绍及其实操

    一.基本概念和介绍 数据持久化的概念 数据持久化是将内存中的数据模型转换为存储模型,以及将存储模型转换为内存中的数据模型的统称.例如,文件的存储.数据的读取等都是数据持久化操作.数据模型可以是任何数据 ...

  3. Vue2.5开发去哪儿网App 第五章笔记 下

    1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...

  4. jq04--jq与ajax

    之前我们学习了一些有关jq函数的知识,现在我们看看jq与ajax方面的一些东西: 1.ajax(Asynchronous JavaScript and XML 异步的JavaScript与xml):  ...

  5. 推荐一个 MYSQL 的命令行的客户端 MYCLI

    MYCLI 是一个 MySQL 命令行客户端工具 , 可以实现自动补全(auto-completion)和语法高亮,平时测试环境维护一些数据还是蛮方便的. https://github.com/dbc ...

  6. C#基础篇五值类型和引用类型

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P01M ...

  7. 【Java初探03】——流程控制语句

    做任何事情都应当遵守一定的原则,程序设计也是如此,需要有流程控制语言来实现与用户的交流.流程控制对于任何一门编程语言来说都是至关重要的,它提供了控制程序步骤的基本手段,如果没有流程控制语句,整个程序将 ...

  8. mac 安装 python mysqlclient 遇到的问题及解决方法

    在 mac 上安装 mysqlclient 遇到了一些问题,查找资料很多人都遇到了同样的问题.通过资料和试验,成功了.这里记录一下,希望帮到遇到同样问题的人. 本人使用python3, 安装步骤如下: ...

  9. Spring事务传播属性介绍(三).Nested

    Required.Required_New传播属性分析传送门:https://www.cnblogs.com/lvbinbin2yujie/p/10259897.html Mandatory.Neve ...

  10. tcp/ip通信中tcp头部结构tcphdrp->check校验计算

    通过raw socket修改通信数据后,可通过函数 set_tcp_checksum1(iph); 重新校验计算iph->check值 在http://www.cnblogs.com/dpf-1 ...