diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md index e6ea0796a..b62f7980b 100644 --- a/examples/docs/en-US/pagination.md +++ b/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 +
+ + + + +
+ + +``` +::: + ### 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 | diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md index 7cb89e405..dcecdafc6 100644 --- a/examples/docs/es/pagination.md +++ b/examples/docs/es/pagination.md @@ -125,6 +125,34 @@ Agrega más modulos basados en su escenario. } ``` + +::: +### 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 +
+ + + + +
+ + +``` ::: ### 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 | diff --git a/examples/docs/fr-FR/pagination.md b/examples/docs/fr-FR/pagination.md index a065d6df5..bb85604bf 100644 --- a/examples/docs/fr-FR/pagination.md +++ b/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 +
+ + + + +
+ + +``` +::: + ### 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 diff --git a/examples/docs/zh-CN/pagination.md b/examples/docs/zh-CN/pagination.md index aa104374a..f9a2b4163 100644 --- a/examples/docs/zh-CN/pagination.md +++ b/examples/docs/zh-CN/pagination.md @@ -140,6 +140,34 @@ ``` ::: +### 当只有一页时隐藏分页 + +当只有一页时,通过设置 `hide-on-single-page` 属性来隐藏分页。 + +:::demo +```html +
+ + + + +
+ + +``` +::: + ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------------------|----------------------------------------------------------|-------------------|-------------|--------| @@ -156,6 +184,7 @@ | prev-text | 替代图标显示的上一页文字 | string | — | — | | next-text | 替代图标显示的下一页文字 | string | — | — | | disabled | 是否禁用 | boolean | — | false | +| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - | ### Events | 事件名称 | 说明 | 回调参数 | diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js index 83b8bb313..c342c1e07 100644 --- a/packages/pagination/src/pagination.js +++ b/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 =
; - const layout = this.layout || ''; - if (!layout) return; const TEMPLATE_MAP = { prev: , jumper: , diff --git a/test/unit/specs/pagination.spec.js b/test/unit/specs/pagination.spec.js index d83dc4414..d09308514 100644 --- a/test/unit/specs/pagination.spec.js +++ b/test/unit/specs/pagination.spec.js @@ -421,6 +421,17 @@ describe('Pagination', () => { expect(vm.page).to.equal(1); }); + it('hideOnSinglePage', () => { + vm = createVue({ + template: ` + + ` + }); + expect(vm.$el.nodeType).to.be.equal(window.Node.COMMENT_NODE); + }); + describe('click pager', () => { it('click ul', () => { vm = createTest(Pagination, { diff --git a/types/pagination.d.ts b/types/pagination.d.ts index 278d82026..61f0baaa0 100644 --- a/types/pagination.d.ts +++ b/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 }