这篇文章主要为大家展示了“vue如何基于element-ui分页组件封装”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何基于element-ui分页组件封装”这篇文章吧。

创新互联建站是一家专注于网站设计、网站制作和成都服务器托管的网络公司，有着丰富的建站经验和案例。

具体代码如下所示：

export default {
 components: {
 },
 data() {
  return {
  }
 },
 props: {
  pageSize: {
   type: Number,
   default: 10
  },
  total: {
   type: Number,
   default: 1
  }
 },
 watch: {
 },
 methods: {
  //每页展示条数
  handleSizeChange(val) {
   //事件传递
   this.$emit('handleSizeChangeSub', val);
  },
  //当前页
  handleCurrentChange(val) {
   //事件传递
   this.$emit('handleCurrentChangeSub', val);
  }
 },
 // 过滤器设计目的就是用于简单的文本转换
 filters: {},
 // 若要实现更复杂的数据变换，你应该使用计算属性
 computed: {
 },
 created() {
 },
 mounted() {},
 destroyed() {}
}

调用

// 分页
import pages from 'components/common/pages/pages'
components: {
　　pages
 },

handleSizeChangeFun(v) {
　　this.pageSize = v;
　　this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //页面点击
 　　this.pageNum = v; //当前页
 　　this._enterpriseList(); //更新列表
}

补充：下面看下Element-ui组件--pagination分页

一般写后台系统都会有很多的列表，有列表就相应的要用到分页，根据项目中写的几个分页写一下我对分页的理解，就当是学习笔记了。

这是Element-ui提供的完整的例子

以下是我自己在项目中用到的分页