表格和分页分离的,但是使用中,却是结合在一起的.

分析

有以下方式触发查询:

  • mounted 加载数据.
  • 查询按钮 加载数据.
  • pager 变化加载数据
  • 加载数据函数: loadData

问题

  • mounted 调用 page =1; loadData
  • 查询数据,调用 page = 1 ; loadData();
  • pager 变化加载数据 :currentPage.sync ="page" @current-change="listOrder()"

先点击 查询,再点第2页, 再点查询,会执行两次 loadData

因为查询数据指定了 page=1 , 会触发 @current-change , 加上本身触发的 loadData , 共两次 loadData

解决问题

  • 初始化 data

data(){

page:1,

total:0

}

  • mounted 写法:

this.loadData(1);

  • 查询写法:

total=0; loadData(1);

  • 分页控件:
<el-pagination layout="prev, pager, next" v-if="total>10"
:total="total" :currentPage.sync="page" @current-change="loadData" >
</el-pagination>
  • loadData
loadData(page){
this.page = page; ajax();
}

Vue Element Tabe Pager 分页方案的更多相关文章

  1. vue+element的表格分页和前端搜索

    1.前端后台管理会存在很多表格,表格数据过多就需要分页;2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索3.下面贴上一个demo & ...

  2. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  3. vue+element实现分页--之--前端分页

    效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...

  4. 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

    在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...

  5. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  6. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  7. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  8. 循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理

    在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...

  9. 循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

    在系统模块中的业务列表展示里面,一般我们都会在列表中放置一些查询条件,如果是表字段不多,大多数情况下,放置的条件有十个八个就可以了,如果是字段很多,而这些条件信息也很关键的时候,就可能放置很多条件,但 ...

随机推荐

  1. 针对需要使用T3协议的Weblogic2628漏洞解决方案

    针对需要使用T3协议的Weblogic2628漏洞解决方案 前几天用户的服务器中检查到了Weblogic2628l漏洞,并且打过Oracle官方补丁后还是能检测到. 针对此问题,去网上查找了一些资料. ...

  2. linux之在当前目录下按照文件大小进行排序的三种方法

    当前目录下按照文件大小排序 [root@test23 script]# ls -lSh 总用量 44K -rw-r--r-- 1 root root 2.4K 12月 8 17:24 test.con ...

  3. C++基础算法学习——逆波兰表达式问题

    例题:逆波兰表达式逆波兰表达式是一种把运算符前置的算术表达式,例如普通的表达式2 + 3的逆波兰表示法为+ 2 3.逆波兰表达式的优点是运算符之间不必有优先级关系,也不必用括号改变运算次序,例如(2 ...

  4. win10 文件扩展名的更改

    win10 文件扩展名的改 随便打开一个文件夹,最好是"此电脑",  第二行是 "     文件  -   计算机  -  查看   " 在查看里面就可以更改了 ...

  5. activiti5.14版本在线流程设计器的国际化中文支持

    参考了前辈的一些国际化支持做法,加上自己对流程的一些理解,做了activiti5.14版本的国际化支持.发现有若干bug,比如属性设置弹出窗口里的grid里的下拉列表不支持显示中文(要修改oryx.d ...

  6. 采用spring的schedule注解配置定时任务

    1 在springmvc配置文件中新增以下配置 <!-- 此处对于定时时间的配置会被注解中的时间配置覆盖,因此,以注解配置为准 --> <task:scheduled-tasks s ...

  7. merge-two-sorted-lists (归并排序中的合并)

    class Solution { public: ListNode *mergeTwoLists(ListNode *l1, ListNode *l2) { if (l1 == NULL) retur ...

  8. MySql常用命令集Mysql常用命令4

    说明: 用中括号([])括起来的部分表示是可选的,用大括号({})括起来的部分是表示必须 从中选择其中的一个. 1 FROM子句 FROM 子句指定了Select语句中字段的来源.FROM子句后面是包 ...

  9. 小度之家SDK功能介绍

    https://developer.dueros.baidu.com/doc/device-devkit/intro_markdown

  10. Qt 编程指南 2 Hello Designer

    2 Hello Designer  ①编辑窗口部件:为窗口拖拽控件(即部件),编辑控件布局等. ②编辑信号/槽:用户在图形界面的一些动作会触发窗口或控件的信号,信号对应的处理函数就是槽函数,这种模式实 ...