-
Page组件的写法如下:
<template> <Page :current="currentNo" :total="totalCount" :page-size="pageSize" :page-size-opts="pageSizeOpts" :show-total="showTotal" show-sizer @on-change="changePage" placement="top"></Page> </template> <script> export default { <template> <Page :current="currentNo" :total="totalCount" :page-size="pageSize" :page-size-opts="pageSizeOpts" :show-total="showTotal" show-sizer @on-change="changePage" placement="top"></Page> </template> <script> export default { name: 'test', data () { return { // 当前的页码 currentNo: 1, // 总共的数据条数 totalCount: 500, // 每页可以显示多少条 pageSize: 10, // 每页切换的配置 pageSizeOpts: ['10', '20', '50', '100'], // 显示总条数 showTotal: true } } } </script>
-
渲染后的页面效果
渲染后的页面有一点小问题,每页显示10条,但是它那个分页多少条的下拉选项默认不是10条/页
,而直接显示为请选择 -
随后看了一下控制台信息
通过观察控制台信息发现,pageSize被设置为got String with value “10”,大致上说的就是pageSize变成了String类型的,而不是Number类型的再进一步分析,因为pageSize是控制数据能够显示多少条每页,并且由pageSizeOpts这个属性定义出能够显示的下拉选项,也就是你可以选择多少条每页,比如说
1条/页,2条/页,3条/页……
,我们回头再看下pageSizeOpts这个属性有没有设置错误
-
问题提出并作出结果假设
可以确定的是,该属性是一个数组,并且提供了每页切换的多少条数据选项,但是这些选项被设置为字符串,会不会是这个原因导致的呢??? -
开始进行配置
我们重新配置下pageSizeOpts这个属性,配置的内容如下pageSizeOpts: [10, 20, 50, 100],
-
看看页面的效果并观察控制台内容
最后
页面开始加载过程中出现了错误,加载页面成功后,分页下拉选择的默认10条/页
已被选中,并且进行分页选择操作时控制台没有报错,证明了这个pageSizeOpts里面定义必须是Number类型,还有pageSize也要保证为Number类型,否则就默认下拉框选中的是请选择
这一选项