在前端页面上使用ElementUI实现分页组件分页 | Element
1 组件布局代码
:current-page="nowPage" | 设置当前第几页的初始值,通常为1 |
:page-sizes="[3, 6, 9]" | 设置一个下拉列表,给用户选择每页可展示的数据量 |
:page-size="pageNumber" | 设置每页显示几条数据的初始值,可以自定,比如这里设置了3 |
:pager-count="5" | 最多显示多少个页码,超过就用……代替中间的数据 |
layout="total, sizes, prev, pager, next, jumper" | 固定写法,设置分页组件的布局,顺序可以变化 total->总条数 sizes->下拉列表 prev->上一页 pager->页面跳转列表 next->下一页 jumper->页面跳转输入框 |
:total="total" | 设置查询出来的总条数,通常设置为0 |
@size-change="触发函数" | 当每页显示几条数据发生变化时触发的事件,会给回调函数传送此时设置的每页条数 |
@current-change="触发函数2" | 当前页码发生变化时触发的事件,会给回调函数传送用户选定的页码(如果用户选择了上/下页会自动计算新的页码) |
2 组件触发事件代码
组件的两个事件是固定使用且必须使用的,但是要注意以下几点:
①两个触发事件绑定的函数不能加括号,这会导致事件传给回调函数的值出错。
②在VUE的methods下编写两个事件的触发函数时记得写参数
③页码设置的每页显示几条和用户需要跳转的新页面要存在VUE的data中,并且执行一次查询数据,对页面的数据进行更新
注意除了queryInfo里的,外面还得设置三个初值用于分页组件的页面显示
④VUE的data数据很简单,分页初始值放外面,用户录入的信息全放一个json对象中,请求类型就定为show,用户不录入数据时,这些数据默认为空。
调用查询方法时如果传入这个queryInfo,那就只会对应一个叫show的方法,此时是查所有还是进行某种条件查询,全看queryInfo中哪些数据不为空,dao中会进行判断然后追加到sql的where后
3 页面更新的查询语句
①注意图中三条代码,回传数据的方式
②写的这个方法封装好了,如果没传值直接调用,就会把vm.queryInfo(上面的图)作为请求参数传过去
其他地方调用这个方法时,通常会传入”type:方法名“ 这种键值对,这就改变了后端要执行的方法;也可以传一个json,里面带上一个type键值对就行。
4 分页组件触发函数的设置
情景一
设置分页组件的触发函数时,调整了每页显示数量时,除了常规的传值给vue对象外,还要额外设置两行代码
①将当前页面设置为第一页,避免当前页面大于最大页面导致显示不出数据
②当前页面设置时既要设置给VUE对象用于查询,也要设置给页面组件,缺一不可
例图折叠
此时的效果为能每次设置当前页面显示数量时,都会回到第一页
情景二
又或者在最开始理解的基础上(两个触发函数分别设置VUE对象)再分别加一条,直接去设置分页组件的值。
此时的效果为每次设置当前页面显示数量时,如果当前页码大于新设定下的最大页码,就会在最大页码,但是当页码小于新设定下的最大页码,就会保持当前页码