1、简介

• 应用场景：在单个页面（表格）中，需要显示大量数据，一方面请求时，对服务器端照成很大压力，客户端同样如此，而用户一次（一眼）通常不会浏览很多条数据，这时候就用到分页。

• 作用：

  • 减少服务器与客户端数据交互量，减轻压力
  • 提高用户体验

• 效果图示1-1：

2、el-pagination详解

2.1、常用属性

3、示例

• 效果图示3-1：

• 源码3-1：

    <template>
    	...
    	<el-pagination
    	  @size-change="handleSizeChange"
    	  @current-change="handleCurrentChange"
    	  :current-page.sync="query.currentPage"
    	  :page-sizes="[10, 20, 50, 100]"
    	  :page-size="query.pageSize"
    	  layout="total, sizes, prev, pager, next, jumper"
    	  hide-on-single-page
    	  :total="total">
    	</el-pagination>
    	...
    </template>
    <scirpt>
    	...
    	export default {
      data() {
    	return {
    	  cateList: [],
    	  query: {
    		currentPage: 1,
    		pageSize: 10,
    	  },
    	  total: 0,
    	...
    	methods: {
    		 handleSizeChange(val) {
    		this.query.pageSize = val
    		this.getCateList() // 重新请求数据
    	},
    	handleCurrentChange(val) {
    		this.query.currentPage = val
    		this.getCateList()
    	}
    	}
    </script>
  

完整页码代码参考博文‘全栈项目-乐优商场-分类管理-前端-页面渲染’。

后记 ：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/ly-bms    // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/ly-backend        // 后端项目