element-ui_el-pagination-分页

element-ui_el-pagination-分页

---

目录

---

---

内容

---

1、简介

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

• 作用：

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

• 效果图示1-1：

2、el-pagination详解

2.1、常用属性

属性名	类型	可接受值	默认	描述
page-size	number	-	10	每页显示的数据数量，支持.sync修饰符
total	number	-	-	总数量，通常后台返回
page-count	number	number	-	总页数
pager-count	number	5~21直接的奇数	7	当总页数超过设定值时，分页页码折叠显示
layout	string	sizes, prev, pager, next, jumper, ->, total, slot	‘prev, pager, next, jumper, ->, total’	分页布局，可自定义
page-sizes	number[]	-	[10,20,30,40,50,100]	每页显示数据数量可选项
hide-on-single-page	boolean	-	false	当只有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        // 后端项目