Pagination: add hide-on-single-page attribute (#15096)

examples/docs/en-US/pagination.md

@@ -140,6 +140,34 @@ Add more modules based on your scenario.
 ```
 :::
 
+### Hide pagination when there is only one page
+
+When there is only one page, hide the pagination by setting the `hide-on-single-page` attribute.
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: false
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
@@ -156,6 +184,7 @@ Add more modules based on your scenario.
 | prev-text | text for the prev button | string | — | — |
 | next-text | text for the next button | string | — | — |
 | disabled | whether Pagination is disabled | boolean | — | false |
+| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/es/pagination.md

@@ -125,6 +125,34 @@ Agrega más modulos basados en su escenario.
   }
 </script>
 ```
+
+:::
+### Hide pagination when there is only one page
+
+When there is only one page, hide the pagination by setting the `hide-on-single-page` attribute.
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: false
+      }
+    }
+  }
+</script>
+```
 :::
 
 ### Atributos
@@ -141,7 +169,8 @@ Agrega más modulos basados en su escenario.
 | popper-class | clase propia para el `dropdown` del `select` del número de páginas | string   | —                                        | —                                      |
 | prev-text    | texto para el botón `prev`               | string   | —                                        | —                                      |
 | next-text    | texto para el botón `next`               | string   | —                                        | —                                      |
-| disabled | si Pagination esta disabled | boolean | — | false |
+| disabled     | si Pagination esta disabled              | boolean  | —                                        | false                                  |
+| hide-on-single-page | whether to hide when there's only one page | boolean |—                                 | -                                      |
 
 ### Eventos
 | Nombre del evento | Descripción                             | Parámetros                    |

examples/docs/fr-FR/pagination.md

@@ -144,6 +144,34 @@ Vous pouvez ajouter plus de modules suivant vos besoins.
 ```
 :::
 
+### Hide pagination when there is only one page
+
+When there is only one page, hide the pagination by setting the `hide-on-single-page` attribute.
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: false
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributs
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
@@ -161,6 +189,7 @@ Vous pouvez ajouter plus de modules suivant vos besoins.
 | prev-text | Texte du bouton prev. | string | — | — |
 | next-text | Texte du bouton next. | string | — | — |
 | disabled | Si la pagination est désactivée. | boolean | — | false |
+| hide-on-single-page | whether to hide when there's only one page | boolean | — | - |
 
 ### Évènements
 

examples/docs/zh-CN/pagination.md

@@ -140,6 +140,34 @@
 ```
 :::
 
+### 当只有一页时隐藏分页
+
+当只有一页时，通过设置 `hide-on-single-page` 属性来隐藏分页。
+
+:::demo
+```html
+<div>
+ <el-switch v-model="value">
+ </el-switch>
+ <el-pagination
+  :hide-on-single-page="value"
+  :total="5"
+  layout="prev, pager, next">
+</el-pagination>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: false
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
@@ -156,6 +184,7 @@
 | prev-text | 替代图标显示的上一页文字 | string | — | — |
 | next-text | 替代图标显示的下一页文字 | string | — | — |
 | disabled | 是否禁用 | boolean | — | false |
+| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

packages/pagination/src/pagination.js

@@ -52,7 +52,9 @@ export default {
 
     background: Boolean,
 
-    disabled: Boolean
+    disabled: Boolean,
+
+    hideOnSinglePage: Boolean
   },
 
   data() {
@@ -65,12 +67,14 @@ export default {
   },
 
   render(h) {
+    const layout = this.layout;
+    if (!layout) return null;
+    if (this.hideOnSinglePage && (!this.internalPageCount || this.internalPageCount === 1)) return null;
+
     let template = <div class={['el-pagination', {
       'is-background': this.background,
       'el-pagination--small': this.small
     }] }></div>;
-    const layout = this.layout || '';
-    if (!layout) return;
     const TEMPLATE_MAP = {
       prev: <prev></prev>,
       jumper: <jumper></jumper>,

test/unit/specs/pagination.spec.js

@@ -421,6 +421,17 @@ describe('Pagination', () => {
     expect(vm.page).to.equal(1);
   });
 
+  it('hideOnSinglePage', () => {
+    vm = createVue({
+      template: `
+        <el-pagination
+          hide-on-single-page
+          :total="1" />
+      `
+    });
+    expect(vm.$el.nodeType).to.be.equal(window.Node.COMMENT_NODE);
+  });
+
   describe('click pager', () => {
     it('click ul', () => {
       vm = createTest(Pagination, {

types/pagination.d.ts

@@ -37,4 +37,7 @@ export declare class ElPagination extends ElementUIComponent {
 
   /** Text for the prev button */
   nextText: string
+
+  /** Whether to hide when thers's only one page */ 
+  hideOnSinglePage: boolean
 }