Pagination: update docs for pager-count (#10772)

examples/docs/en-US/pagination.md

@@ -73,6 +73,19 @@ If you have too much data to display in one page, use pagination.
 ```
 :::
 
+### Number of pagers
+
+:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### Buttons with background color
 
 :::demo Set the `background` attribute and the buttons will have a background color.
@@ -215,6 +228,7 @@ Add more modules based on your scenario.
 | page-size              | item count of each page  | number |      —       | 10 |
 | total | total item count | number | — | — |
 | page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
+| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |
 | current-page | current page number, supports the .sync modifier | number | — | 1 |
 | layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |

examples/docs/es/pagination.md

@@ -72,6 +72,19 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
 ```
 :::
 
+### Number of pagers
+
+:::demo By default, Pagination collapses extra pager buttons when it has more than 7 pages. This can be configured with the `pager-count` attribute.
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### Paginación pequeña
 
 Usa una paginación pequeña en caso de espacio limitado.
@@ -201,6 +214,7 @@ Agrega más modulos basados en su escenario.
 | page-size    | cantidad de elementos por página         | number   | —                                        | 10                                     |
 | total        | total de elementos                       | number   | —                                        | —                                      |
 | page-count   | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number   | —                                        | —                                      |
+| pager-count  | number of pagers. Pagination collapses when the total page count exceeds this value | number | odd number between 5 and 21 | 7 |
 | current-page | número actual de la página, soporta el modificador .sync | number   | —                                        | 1                                      |
 | layout       | layout de la paginación, elementos separados por coma | string   | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
 | page-sizes   | opciones para la cantidad de elementos por página | number[] | —                                        | [10, 20, 30, 40, 50, 100]              |

examples/docs/zh-CN/pagination.md

@@ -23,6 +23,19 @@
 ```
 :::
 
+### 设置最大页码按钮数
+
+:::demo 默认情况下，当总页数超过 7 页时，Pagination 会折叠多余的页码按钮。通过`pager-count`属性可以设置最大页码按钮数。
+```html
+<el-pagination
+  :page-size="20"
+  :pager-count="11"
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### 带有背景色的分页
 
 :::demo 设置`background`属性可以为分页按钮添加背景色。
@@ -103,18 +116,6 @@
       :total="400">
     </el-pagination>
   </div>
-  <div class="block">
-    <span class="demonstration">Pager 页码数(默认 7 个)</span>
-    <el-pagination
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-      :current-page.sync="currentPage5"
-      :page-size="20"
-      :pager-count="9"
-      layout="sizes, prev, pager, next"
-      :total="1000">
-    </el-pagination>
-  </div>
 </template>
 <script>
   export default {
@@ -131,8 +132,7 @@
         currentPage1: 5,
         currentPage2: 5,
         currentPage3: 5,
-        currentPage4: 4,
-        currentPage5: 15
+        currentPage4: 4
       };
     }
   }
@@ -155,8 +155,7 @@
         currentPage1: 5,
         currentPage2: 5,
         currentPage3: 5,
-        currentPage4: 4,
-        currentPage5: 15
+        currentPage4: 4
       };
     },
     mounted() {
@@ -229,7 +228,7 @@
 | page-size | 每页显示条目个数 | Number | — | 10 |
 | total | 总条目数 | Number | — | — |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
-| pager-count | 显示页码按钮的最大数（不包括prev和next） | Number | 大于等于 5 且小于等于 21 的奇数 | 7 |
+| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | Number | 大于等于 5 且小于等于 21 的奇数 | 7 |
 | current-page | 当前页数，支持 .sync 修饰符 | Number | — | 1 |
 | layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |

packages/pagination/src/pagination.js

@@ -23,7 +23,7 @@ export default {
     pagerCount: {
       type: Number,
       validator(value) {
-        return value > 4 && value < 22 && (value | 0) === value && (value % 2) === 1;
+        return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
       },
       default: 7
     },

types/pagination.d.ts

@@ -14,6 +14,9 @@ export declare class ElPagination extends ElementUIComponent {
   /** Total page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is required */
   pageCount: number
 
+  /** Number of pagers */
+  pagerCount: number
+
   /** Current page number */
   currentPage: number