vue项目中element-ui的分页器(组件封装）

• vue项目中element-ui的分页器组件

<template>
	<el-col :span="24" class="toolbar" style="text-align: center;">
		<el-pagination
    		@size-change="handleSizeChange" //  事件：更换每页列内不同的行数
        	@current-change="handleCurrentChange" // 事件：换页
        	:current-page="currentPage" // 当前页数
        	:page-sizes="[5, 10, 20, 40]" // 每页的列表内可更换的不同行数
        	:page-size="pagesize" // 当前页面内的列表行数
        	layout="total, sizes, prev, pager, next, jumper"
        	:total="total" // 列表内所有数据的长度
		></el-pagination>
	</el-col>
</template>
<script>
	data() {
    	return {
        	total: 0, // 列表内所有数据的长度
      		currentPage: 1, // 初始页
      		pagesize: 10, // 当前页面内的列表行数
        }
    }
	// 初始页page、初始每页数据数pagesize和数据data
	// 更换每页列内不同的行数：更新列表数据 
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize;
      console.log(this.pagesize); // 每页下拉显示数据
      this.getUsers();
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
      this.getUsers();
    },
</script>