Before, when I was writing code , There will be many pages table Exhibition , Yes table Paging is also essential , and element-ui The grouping component of provides four events , And so many parameters , If every page is written down , Reusability is too low , Convenient and unified style , Good maintenance . Especially after more methods , The code is very miscellaneous .
edition :element-ui 2.13.1
vue 2.6.11

Event name Description callback parameter
size-changepageSize The number of items per page will be triggered when changing
current-changecurrentPage Changes trigger the current page
prev-click Triggered when the user clicks the previous page button to change the current page Changes trigger the current page
next-click The current page will be triggered after the user clicks the next page button to change the current page
The first step , Package components , Put forward the attributes you need .
<template> <div class="pagination"> <el-pagination
@current-change="handleCurrentChange" @size-change="handleSizeChange"
:page-sizes="pageSizesArr" :total="total" :current-page="currentPage"
:page-size="pageSize" :layout="layout" ></el-pagination> </div> </template>
<script> export default { name: "Pagination", props: { // PageCount total: { type:
Number, default: 0 }, // Current page currentPage: { type: Number, default: 1 }, //
Number of items per page pageSize: { type: Number, default: 10 }, pageSizesArr: { type: Array,
default() { return [10, 20, 30, 50]; } }, layout: { type: String, default:
"total, sizes, prev, pager, next, jumper" } }, data() { return { page: {
_pageSize: this.pageSize, _currentPage: this.currentPage } }; }, methods: { //
Changes in the number of views per page handleSizeChange(val) { console.log(val); this.page._pageSize = val;
this.$emit("pageChange", this.page); }, // Current page number change handleCurrentChange(val) {
this.page._currentPage = val; this.$emit("pageChange", this.page); } } };
</script> <style scoped lang="scss"> .pagination { margin: 20px 0; } </style>
call
<Pagination :total="total" :pageNum="pageNum" :pageSize="pageSize"
@pageChange="pageChange"/> import Pagination from
"@/components/Pagination/index"; components: { Pagination },
definition
data() { return { articleList: [], pageSize: 10, pageNum: 1, total: 0 }; },
method
pageChange(page) { this.pageSize = page._pageSize; this.pageNum =
page._currentPage; this.getData(); },

Technology
©2019-2020 Toolsou All rights reserved,
How to prevent Mac put to sleep ? Tell you 4 This is an effective way be based on C# Students' grades / mis solve element-ui The drop-down box of has a value but cannot be selected Student information management system source code -C language VR,AR and MR The difference between these technologies 【 Data structure and algorithm 6】 Stack implementation of comprehensive calculator utilize python Yes monkey Automatic log analysis Laya Wechat games sub package loading Alibaba enterprise email smtp set up ( practice )【Java Details of knowledge points 3】 Serializable and Deserialize