Vue Element Tabe Pager 分页方案
表格和分页分离的,但是使用中,却是结合在一起的.
分析
有以下方式触发查询:
- 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 分页方案的更多相关文章
- vue+element的表格分页和前端搜索
1.前端后台管理会存在很多表格,表格数据过多就需要分页;2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索3.下面贴上一个demo & ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- vue+element实现分页--之--前端分页
效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...
- 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
- 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
- 循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理
在前面随笔介绍了ABP+Vue前后端的整合处理,包括介绍了ABP的后端设计,以及前端对ABP接口API的ES6的封装,通过JS的继承类处理,极大减少了重复臃肿的代码,可以简化对后端API接口的封装,而 ...
- 循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计
在系统模块中的业务列表展示里面,一般我们都会在列表中放置一些查询条件,如果是表字段不多,大多数情况下,放置的条件有十个八个就可以了,如果是字段很多,而这些条件信息也很关键的时候,就可能放置很多条件,但 ...
随机推荐
- 针对需要使用T3协议的Weblogic2628漏洞解决方案
针对需要使用T3协议的Weblogic2628漏洞解决方案 前几天用户的服务器中检查到了Weblogic2628l漏洞,并且打过Oracle官方补丁后还是能检测到. 针对此问题,去网上查找了一些资料. ...
- linux之在当前目录下按照文件大小进行排序的三种方法
当前目录下按照文件大小排序 [root@test23 script]# ls -lSh 总用量 44K -rw-r--r-- 1 root root 2.4K 12月 8 17:24 test.con ...
- C++基础算法学习——逆波兰表达式问题
例题:逆波兰表达式逆波兰表达式是一种把运算符前置的算术表达式,例如普通的表达式2 + 3的逆波兰表示法为+ 2 3.逆波兰表达式的优点是运算符之间不必有优先级关系,也不必用括号改变运算次序,例如(2 ...
- win10 文件扩展名的更改
win10 文件扩展名的改 随便打开一个文件夹,最好是"此电脑", 第二行是 " 文件 - 计算机 - 查看 " 在查看里面就可以更改了 ...
- activiti5.14版本在线流程设计器的国际化中文支持
参考了前辈的一些国际化支持做法,加上自己对流程的一些理解,做了activiti5.14版本的国际化支持.发现有若干bug,比如属性设置弹出窗口里的grid里的下拉列表不支持显示中文(要修改oryx.d ...
- 采用spring的schedule注解配置定时任务
1 在springmvc配置文件中新增以下配置 <!-- 此处对于定时时间的配置会被注解中的时间配置覆盖,因此,以注解配置为准 --> <task:scheduled-tasks s ...
- merge-two-sorted-lists (归并排序中的合并)
class Solution { public: ListNode *mergeTwoLists(ListNode *l1, ListNode *l2) { if (l1 == NULL) retur ...
- MySql常用命令集Mysql常用命令4
说明: 用中括号([])括起来的部分表示是可选的,用大括号({})括起来的部分是表示必须 从中选择其中的一个. 1 FROM子句 FROM 子句指定了Select语句中字段的来源.FROM子句后面是包 ...
- 小度之家SDK功能介绍
https://developer.dueros.baidu.com/doc/device-devkit/intro_markdown
- Qt 编程指南 2 Hello Designer
2 Hello Designer ①编辑窗口部件:为窗口拖拽控件(即部件),编辑控件布局等. ②编辑信号/槽:用户在图形界面的一些动作会触发窗口或控件的信号,信号对应的处理函数就是槽函数,这种模式实 ...