iview-admin分页条数下拉选项显示为“请选择”的解决方法

• 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类型，否则就默认下拉框选中的是请选择这一选项