发布时间:2024-11-20 13:01
一般表格比较多的项目中,多会涉及到分页和条件检索。
如果每个表格单独配置一个分页,后期维护起来比较繁琐,而且,写代码也是copy来copy去,十分烦恼。
因此,基于elementui 的分页组件的二次封装就应时而生了。
在分页子组件中,我只关心当前页是第几页,以及共有多少页。
很显然,默认的分页,当前页肯定是第一页,而共有多少页,需要看后台返回的数据总数量,除以每页显示的数据量
简单来说,就是Math.ceil(count / pageSize)
下面是分页组件具体的代码。
<template>
<el-pagination
background
layout="slot, prev, pager, next"
:current-page.sync="currentPage"
:page-size="pageSize"
prev-text="上一页"
next-text="下一页"
:total="count"
@current-change="handleCurrentChange"
>
<span v-html="`共 ${count} 条 共 ${pages} 页`" />
</el-pagination>
</template>
<script>
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)
}
}
}
</script>
这样,一个子组件就完成了。
下面看看如何在父组件中使用。
<template>
<div>
<div class="search-wraper">
<span>输入查找:</span>
<el-input v-model="searchKey" />
<el-button @click="fetchData">查询</el-button>
</div>
<div>
<el-table v-loading="loading" :data="data"/>
<my-pagination :count="count" @pageEvent="fetchData" />
</div>
</div>
</template>
<script>
// 首先,我们先引入这个子组件,并在父组件中注册
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 = r.results
this.count = r.count
}).catch().finally(this.loading = false)
}
}
}
</script>