|
【郑州校区】传智健康项目讲义第二章预约管理-检查项管理五
4. 检查项分页
本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为：{currentPage:1,pageSize:10,queryString:''itcast''}
后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的json格式为：{total:1000,rows:[]}
4.1 完善页面
4.1.1 定义分页相关模型数据
[AppleScript] 纯文本查看 复制代码 pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
4.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法
[AppleScript] 纯文本查看 复制代码 //钩子函数，VUE对象初始化完成后自动执行
created() {
this.findPage();
}//分页查询
findPage() {
//分页参数
var param = {
currentPage:this.pagination.currentPage,//页码
pageSize:this.pagination.pageSize,//每页显示的记录数
queryString:this.pagination.queryString//查询条件
};
//请求后台
axios.post("/checkitem/findPage.do",param).then((response)=> {
//为模型数据赋值，基于VUE的双向绑定展示到页面
this.dataList = response.data.rows;
this.pagination.total = response.data.total;
});
}
4.1.3 完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件，调用findPage方法
[AppleScript] 纯文本查看 复制代码 <el‐button @click="findPage()" class="dalfBut">查询</el‐button>
为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange
[AppleScript] 纯文本查看 复制代码 <el‐pagination
class="pagiantion"
@current‐change="handleCurrentChange"
:current‐page="pagination.currentPage"
:page‐size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el‐pagination>
定义handleCurrentChange方法
[AppleScript] 纯文本查看 复制代码 //切换页码
handleCurrentChange(currentPage) {
//currentPage为切换后的页码
this.pagination.currentPage = currentPage;
this.findPage();
}
| 
收藏
淘帖
踩
