javaweb VUE+ElementUI 分页组件设置 前端部分

在前端页面上使用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对象）再分别加一条，直接去设置分页组件的值。

此时的效果为每次设置当前页面显示数量时，如果当前页码大于新设定下的最大页码，就会在最大页码，但是当页码小于新设定下的最大页码，就会保持当前页码