问题场景，我对el-pagination进行二次封装时，明明传了参数过去，但是分页组件却一直不显示，于是我从各种可能的地方一一尝试 1.
我们现在会检查一些不合理的用法，如果发现分页器未显示，可以核对是否违反以下情形：
- `total` 和 `page-count` 必须传一个，不然组件无法判断总页数；优先使用 `page-count`;
- 如果传入了 `current-page`，必须监听 `current-page` 变更的事件（`@update:current-page`），否则分页切换不起作用；
- 如果传入了 `page-size`，且布局包含 page-size 选择器（即 `layout` 包含 `sizes`），必须监听 `page-size` 变更的事件（`@update:page-size`），否则分页大小的变化将不起作用。
<template>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[20, 40, 60, 80]"
layout="sizes, prev, pager, next"
:total="total"
/>
</template>
<script>
import {defineComponent} from "vue"
export default defineComponent({
name: "",
props:{
total:100,
pageSize:10,
currentPage:1
},
setup(){
}
})
</script>
<style lang="scss" scoped>
</style>
然后我发现我初步封装的时候确实没有写上@size-change="handleSizeChange"和 @current-change="handleCurrentChange"，于是我把这两个加上了，代码如下：
<template>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[20, 40, 60, 80]"
layout="sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<script>
import {defineComponent} from "vue"
export default defineComponent({
name: "",
props:{
total:100,
pageSize:10,
currentPage:1
},
setup(){
const handleSizeChange=()=>{
}
const handleCurrentChange=()=>{
}
return {
handleCurrentChange,handleSizeChange
}
}
})
</script>
<style lang="scss" scoped>
</style>
然后发现还是不显示，于是我把total的赋值变量改为totalNum,就是不与属性名同名，最后分页组件正确显示了，后来尝试了很多中情况，发现这两个函数和total赋值缺一不可，不知道为啥total同名就不显示，百度后，发现有人跟我遇到同样的问题！！！！正确显示的代码如下！！！
<template>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[20, 40, 60, 80]"
layout="sizes, prev, pager, next"
:total="totalNum"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<script>
import {defineComponent} from "vue"
export default defineComponent({
name: "",
props:{
totalNum:100,
pageSize:10,
currentPage:1
},
setup(){
const handleSizeChange=()=>{
}
const handleCurrentChange=()=>{
}
return {
handleCurrentChange,handleSizeChange
}
}
})
</script>
<style lang="scss" scoped>
</style>
