vue项目 使用elementui中的el-pagination封装公用分页组件
组件页面:pageNation.vue<template><div class="pagenation"><el-pagination smallclass="text-center"@size-change="handleSizeChange" @current-change="handleCurrentChange":current-pa...
·
组件页面:pageNation.vue
<template>
<div class="pagenation">
<el-pagination small class="text-center" @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page=":current-page="page_index"" :page-sizes="pageSizes" :page-size="page.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
props: {
total: {
type: Number
}, // 总条数
page_index: {
type: Number
},
},
data() {
return {
pageSizes: [10, 20, 50, 100],
page: {
page_index: 1,
page_limit: 10
}
};
},
methods: {
// // 每页查看条数变化
handleSizeChange(val) {
this.page.page_limit= val;
this.$emit('pageChange', this.page);
},
// 当前页码变化
handleCurrentChange(val) {
this.page.page_index= val;
this.$emit('pageChange', this.page);
}
},
}
</script>
<style scoped>
.pagenation{
margin: 20px 0;
}
</style>
使用分页组件
<template>
<page-nation :total="page_total" @pageChange="pageChange" :page_index="page_index"></page-nation>
</template>
import pageNation from '@/components/common/pageNation' // 引入
export default{
data () {
return {
page_index: 1, // 页数
page_total: 1, // 总页数
page_size: 10,
}
},
components: {
pageNation
},
methods: {
pageChange (item) {
console.log(item)
this.page_index = item.page_index;
this.page_size = item.page_limit;
this.initData() //改变页码,重新渲染页面
},
}
}
Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!
更多推荐
已为社区贡献16条内容
所有评论(0)