This article describes the package paging components and usage of Vue development. Share it for your reference, as follows:
Use el-pagination in elementui to encapsulate paging components
:
<template>
<div class="pagination">
<el-pagination small class="text-center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="" :page-sizes="pageSizes" :page-size=""
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
props: {
total: {
type: Number
} // Total number of },
data() {
return {
pageSizes: [10, 20, 50, 100],
page: {
page: 1,
limit: 10
}
};
},
methods: {
// Changes in the number of bars per page handleSizeChange(val) {
= val;
this.$emit('pageChange', );
},
// Change of current page number handleCurrentChange(val) {
= val;
this.$emit('pageChange', );
}
}
}
</script>
<style>
.pagination {
margin: 20px 0;
}
</style>
Use the created paging component
<pagination :total="total" @pageChange="pageChange"></pagination>
// Page number switchingpageChange(item) {
= ;
= ;
();
},
I hope this article will be helpful to everyone's programming.