最近在使用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. Ubutntu安装docker启动报Removed /etc/systemd/system/docker.service.

    Ubutntu安装docker启动报Removed /etc/systemd/system/docker.service.的错误,只需要执行以下三条命令. systemctl unmask docke ...

  2. Python获取二维数组的行列数

    import numpy as np x = np.array([[1,2,5],[2,3,5],[3,4,5],[2,3,6]]) # 输出数组的行和列数 print x.shape # (4, 3 ...

  3. 封装、构造方法、private、Static与this关键字、main（）_Day07

    1:成员变量和局部变量的区别(理解) (1)定义位置区别:      成员变量:定义在类中,方法外.    局部变量:定义在方法中,或者方法声明上.    (2)初始化值的区别:   成员变量:都有默 ...

  4. Redis笔记(4)独立功能的实现

    1.前言 本节记录一下redis的一些功能上的实现,包括发布订阅.事务.Lua脚本.排序.二进制位数组.慢查询日志和监视器. 2.发布订阅 上一章介绍sentinel的时候说到了sentinel会订阅 ...

  5. 【教程向】——基于hexo+github搭建私人博客

    前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...

  6. maven install 打包 报错 Cannot run program "gpg.exe": CreateProcess error

    打包报错, mvn install后加上参数-Dgpg.skip,例如:mvn install -Dgpg.skip   即可解决. 我们也可以去掉 这个 插件   <plugin>    ...

  7. Python模块:日志输出—logging模块

    1. logging介绍 Python的logging模块提供了通用的日志系统,可以方便第三方模块或者是应用使用.这个模块提供不同的日志级别,并可以采用不同的方式记录日志,比如文件,HTTP GET/ ...

  8. 【IT笔试面试题整理】判断一个树是否是另一个的子树

    [试题描述]定义一个函数,输入判断一个树是否是另一个对的子树 You have two very large binary trees: T1, with millions of nodes, and ...

  9. Spring ResponseEntity

    简单记录下 ResponseEntity 的使用方式 @RequestMapping(value="/demo1" ) public ResponseEntity demo1(){ ...

  10. smarty 模板标签

    smarty 模板标签 变量标签 数组变量标签 变量调节器 条件标签 循环标签 数组变量标签 模板加载标签 预定义变量标签 常量标签