el-pagination实现

el-pagination是一个Vue前端分页组件，用于在数据量较大时进行分页查询。在使用el-pagination时，可以通过设置不同的属性和事件来实现不同的功能和交互效果。

在提供的代码中，<el-pagination>组件被用于实现分页功能，其中包括当前页数、每页显示的数据量、总数据量等属性的设置。通过设置layout属性，可以自定义分页组件的布局。同时，还可以通过监听size-change和current-change事件，实现对每页显示数据量和当前页数的处理。

以下是el-pagination的使用示例：
<template>
<div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage: 4
};
}
}
</script>