这篇文章主要为大家展示了“vue如何基于element-ui分页组件封装”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何基于element-ui分页组件封装”这篇文章吧。
我们拥有10多年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供成都网站设计、
成都做网站、微信开发、
成都微信小程序、
成都手机网站制作、
HTML5、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。
具体代码如下所示：
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提供的完整的例子
