vue|最简单的分页组件-基于 elementui 的分页二次封装 elementui|分页|筛选重置页数|v

背景一般表格比较多的项目中，多会涉及到分页和条件检索。
如果每个表格单独配置一个分页，后期维护起来比较繁琐，而且，写代码也是copy来copy去，十分烦恼。
因此，基于elementui 的分页组件的二次封装就应时而生了。
子组件代码在分页子组件中，我只关心当前页是第几页，以及共有多少页。
很显然，默认的分页，当前页肯定是第一页，而共有多少页，需要看后台返回的数据总数量，除以每页显示的数据量
简单来说，就是Math.ceil(count / pageSize)
下面是分页组件具体的代码。

> export default { props: { count: {// 数据总量 type: Number, default: 0 } }, data() { return { pageSize: 10,// 每页显示多少条数据 currentPage: 1// 默认当前页显示第一页 } }, computed: { pages() {// 计算共多少页 return Math.ceil(this.count / this.pageSize) } }, methods: { handleCurrentChange(page) {// 点击页码事件，通知父组件 this.$emit('pageEvent', this.currentPage) } } }

这样，一个子组件就完成了。
【vue|最简单的分页组件-基于 elementui 的分页二次封装】下面看看如何在父组件中使用。
在父组件中的使用

> // 首先，我们先引入这个子组件，并在父组件中注册 import myPagination from '@/components/page/index' import { getLog } from '@/api/user' export default { components: { myPagination }, data(){ return { searchKey: '', loading: true, page: 1, data: [], count: 0 } }, methods: { fetchData(currentpage) { if (typeof currentpage === 'number') { // 切换页码 this.page = currentpage } else { // 在输入检索条件进行查询的时候，将当前页设置为 1 this.page = 1 } const { page, searchKey } = this getLog({ page, searchKey }).then(r => { this.data = https://www.it610.com/article/r.results this.count = r.count }).catch().finally(this.loading = false) } } }