element-ui_pagination-分页组件及封装

element-ui_pagination-分页组件及封装

---

目录

---

---

内容

---

1、简介

在列表查询时，如果查询全部数据，可能返回很多数据，且占用很大网络带宽，页面渲染也会很慢，这时我们会使用分页组件。
element-ui种分页组件为<el-pagination></el-pagination>

2、常用属性

名称	类型	取值	默认值	描述
page-size	number	-	10	每页显示条目数
current-page	number	-	1	当前页
total	number	-	-	总条目数
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	-	-	只有1页时隐藏分页组件

3、事件

名称	参数	描述
size-change	新的每页条目数	当每页条目数改变时触发
current-change	新的当前页	当前页改变时触发

4、封装

封装参考vue-element-admin, Pagination/index.vue代码如下：

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
	<el-pagination
	  :background="background"
	  :current-page.sync="currentPage"
	  :page-size.sync="pageSize"
	  :layout="layout"
	  :page-sizes="pageSizes"
	  :total="total"
	  v-bind="$attrs"
	  hide-on-single-page
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
	/>
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Pagination',
  props: {
	total: {
	  required: true,
	  type: Number
	},
	page: {
	  type: Number,
	  default: 1
	},
	limit: {
	  type: Number,
	  default: 20
	},
	pageSizes: {
	  type: Array,
	  default() {
		return [10, 20, 30, 50]
	  }
	},
	layout: {
	  type: String,
	  default: 'total, sizes, prev, pager, next, jumper'
	},
	background: {
	  type: Boolean,
	  default: true
	},
	autoScroll: {
	  type: Boolean,
	  default: true
	},
	hidden: {
	  type: Boolean,
	  default: false
	}
  },
  computed: {
	currentPage: {
	  get() {
		return this.page
	  },
	  set(val) {
		this.$emit('update:page', val)
	  }
	},
	pageSize: {
	  get() {
		return this.limit
	  },
	  set(val) {
		this.$emit('update:limit', val)
	  }
	}
  },
  methods: {
	handleSizeChange(val) {
	  this.$emit('pagination', { page: this.currentPage, limit: val })
	  if (this.autoScroll) {
		scrollTo(0, 800)
	  }
	},
	handleCurrentChange(val) {
	  this.$emit('pagination', { page: val, limit: this.pageSize })
	  if (this.autoScroll) {
		scrollTo(0, 800)
	  }
	}
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

• 解析：
  • v-bing="$attrs"：当前组件的属性，通俗的讲也就是在组件标签定义的一系列属性，如input的value，placeholder等，但是不包括在当前组件里面定义的props属性

5、应用

• 代码

    <pagination
    	  :total="total"
    	  :page.sync="listQuery.page"
    	  :limit.sync="listQuery.limit"
    	  @pagination="getList"
    />
  

• 效果图示(因为数据少，展示把hide-on-single-page去掉)：

详细查看后续博文。

后记 ：

  欢迎交流，本人QQ:806797785

码云地址：https://gitee.com/gaogzhen