关于elementUI的分页器

<el-pagination class="pagination" 
        @current-change="handleCurrentChange" 
        background
        layout="prev, pager, next , jumper" 
        :current-page.sync="tableList.pageIndex" 
        :total="totalCount">
</el-pagination>

问题是：这样写没有【总页数】【每页多少条】的

分页器.png

解决：

<el-pagination  background 
    layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        :current-page.sync="tableList.pageIndex" 
    :page-sizes="[5, 10, 15, 20]"    //每页展示条选择组件
    :page-size="pagesize"          //每页展示条
       @current-change="handleCurrentChange"  // currentPage 改变触发
       @size-change="handleSizeChange"           //pagesize改变时触发
>
</el-pagination>

return{
       tableList: {
          pageIndex: 1,
        },
        tableDatas: [],
        totalCount: 1,
        pagesize: 10,
        currpage: 1
}
methods: {
     getlist() {
         let starttime = new Date();
         axios('/mockDrink').then(data => {
               console.log(new Date() - starttime)
                this.tableDatas= data.data.data;
                        this.totalCount= data.data.totalCount;
                 }).catch(err => {
           console.error(err)
           this.$alert('请求超时，刷新重试！')
             })
     },
      handleCurrentChange(cpage) {
         this.currpage = cpage;
      },
      handleSizeChange(psize) {
         this.pagesize = psize;
      }
    }

效果如下：

image.png