在使用Vue3 Element Plus 开发后台管理系统的时候，使用 pagination 分页的时候出现一个莫名奇妙的问题。
动态设置分页的total的时候，明明入参什么都正确的。但是页面上分页器死活出不来。把入参 total 写死数量，页面组件又正常渲染。检查了半天也没有发现参数有什么问题。
一开始以为是声明值有问题，在接口获取到参数的时候没有更新上去，后来加了console打印出来也是正常的。
代码语言：javascript复制<el-pagination
class='mt-4'
background
:current-page='currentPage'
:page-sizes='[10, 20, 50, 100]'
:page-size='pageSize'
layout='total, sizes, prev, pager, next, jumper'
:total='total'
@size-change='handleSizeChange'
@current-change='handleCurrentChange'
/>
最后发现是接口返回的total字段是字符串类型，而组件接受的类型是Number类型。所以导致组件内部错误从而页面不显示了。
也是大无语！把接口返回的参数改成number类型就好了！
由此可以知道，下回遇到这种冷门的奇怪的问题，一定要先检查一下组件的入参格式是否正确，否则极有可能浪费时间呀。
代码语言：javascript复制
const total = ref(0)
total.value = Number(res.data.data.total)
