子组件
<template>
<el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
:current-page="currentPage"
:total="total"
:layout="layout"
v-show="total > 0"
>
</el-pagination>
</template>
<script>
export default {
props: {
total: Number,
currentPage: Number,
pageSize: Number,
layout: {
type: String,
default: 'sizes, prev, pager, next, jumper'
},
},
mounted() {
// 这里是在处理显示的为中文,实际上可以采用上一篇文章的处理方法,使用那种方式这里就没有很大的必要
if (document.getElementsByClassName('el-pagination__total')[0]) {
document.getElementsByClassName('el-pagination__total')[0].childNodes[0].nodeValue = `Total ${this.total}`
}
if (document.getElementsByClassName('el-pagination__jump')[0]) {
// *解决 el-pagination 跳转到xx页为中文的问题
document.getElementsByClassName('el-pagination__jump')[0].childNodes[0].nodeValue = 'Go to'
document.getElementsByClassName('el-pagination__jump')[0].childNodes[2].nodeValue = ''
}
},
methods: {
handleCurrentChange(val) {
const query = {
pageIndex: val,
pageSize: this.pageSize
}
this.$emit('pagination', query)
},
handleSizeChange(val) {
const query = {
pageIndex: this.pageIndex,
pageSize: val
}
this.$emit('pagination', query)
}
}
}
</script>
父组件的引用
<Pagination
:total="total"
:current-page="params.pageIndex"
:layout="'sizes, prev, pager, next, jumper'"
@pagination="changePagination">
</Pagination>
// ...
import Pagination from '@/components/Pagination';
// ...
components: { Pagination },
methods: {
// *分页组件改变
changePagination(obj) {
this.params.pageIndex = obj.pageIndex;
this.getList();
}
}