码库记事本

码库记事本

vue element-ui 封装分页组件

小诸哥 0

组件代码 

<template>
<div style="">
<el-pagination
@current-change="handleCurrentChange"
:current-page="Number(currentPage)"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total" style="float:right;margin:15px 0px;">
</el-pagination>
</div>

</template>
<script type="text/ecmascript-6">
export default {
components: {

},
data() {
return {
// page:2
}
},
props:['pageSize','total','currentPage'],
methods: {
//每页展示条数
handleSizeChange(val) {
//事件传递
this.$emit('handleSizeChangeSub', val);
},
//点击页
handleCurrentChange(val) {
//事件传递
this.$emit('handleCurrentChangeSub', val);
}
},
// 过滤器设计目的就是用于简单的文本转换
filters: {},
// 若要实现更复杂的数据变换,你应该使用计算属性
computed: {

},
created() {

},
mounted() {},
destroyed() {}
}
</script>
<style lang="scss" type="text/css" scoped>
</style>


页面引入

import pages from 'components/common/pages/pages'

components: {
  pages
},

调用方法

 
:total="clientList.total" //总页数
:page-size="clientList.per_page" //每页条数
:current-page="clientList.current_page" 当前页面
@handleCurrentChangeSub="handleCurrentChangeFun">


handleCurrentChangeFun(v) { //接收点击分页事件
  this.clientListPage = v; //当前页
this.getClientList(); //获取列表
}



标签: element-ui 封装分页