diff --git a/src/pagination/README.md b/src/pagination/README.md index 23a0c80f6..4f5bea24e 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -60,12 +60,12 @@ export default { |------|------|------|------| | v-model | Current page number | *number* | - | | mode | Mode, can be set to `simple` `multi` | *string* | `multi` | -| total-items | Total items | *number* | `0` | -| items-per-page | Item number per page | *number* | `10` | -| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | *number* | `-` | | prev-text | Previous text | *string* | `Previous` | | next-text | Next text | *string* | `Next` | -| show-page-size | Count of page size to show | *number* | `5` | +| total-items | Total items | *number \| string* | `0` | +| items-per-page | Item number per page | *number \| string* | `10` | +| page-count | The total number of pages, if not set, will be calculated based on `total-items` and `items-per-page` | *number \| string* | `-` | +| show-page-size | Count of page size to show | *number \| string* | `5` | | force-ellipses | Whether to show ellipses | *boolean* | `false` | ### Events diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md index 09cb95938..232188d02 100644 --- a/src/pagination/README.zh-CN.md +++ b/src/pagination/README.zh-CN.md @@ -60,14 +60,14 @@ export default { | 参数 | 说明 | 类型 | 默认值 | |------|------|------|------| | v-model | 当前页码 | *number* | - | -| mode | 显示模式,可选值为 `simple` `multi` | *string* | `multi` | -| total-items | 总记录数 | *number* | `0` | -| items-per-page | 每页记录数 | *number* | `10` | -| page-count | 总页数 | *number* | `根据页数计算` | -| prev-text | 上一页 | *string* | `上一页` | -| next-text | 下一页 | *string* | `下一页` | -| show-page-size | 显示的页码个数 | *number* | `5` | -| force-ellipses | 显示省略号 | *boolean* | `false` | +| mode | 显示模式,可选值为 `simple` | *string* | `multi` | +| prev-text | 上一页按钮文字 | *string* | `上一页` | +| next-text | 下一页按钮文字 | *string* | `下一页` | +| page-count | 总页数 | *number \| string* | 根据页数计算 | +| total-items | 总记录数 | *number \| string* | `0` | +| items-per-page | 每页记录数 | *number \| string* | `10` | +| show-page-size | 显示的页码个数 | *number \| string* | `5` | +| force-ellipses | 是否显示省略号 | *boolean* | `false` | ### Events diff --git a/src/pagination/index.js b/src/pagination/index.js index 44e13ac50..285998f52 100644 --- a/src/pagination/index.js +++ b/src/pagination/index.js @@ -12,28 +12,28 @@ export default createComponent({ prevText: String, nextText: String, forceEllipses: Boolean, + mode: { + type: String, + default: 'multi', + }, value: { type: Number, default: 0, }, pageCount: { - type: Number, + type: [Number, String], default: 0, }, totalItems: { - type: Number, + type: [Number, String], default: 0, }, - mode: { - type: String, - default: 'multi', - }, itemsPerPage: { - type: Number, + type: [Number, String], default: 10, }, showPageSize: { - type: Number, + type: [Number, String], default: 5, }, }, @@ -48,6 +48,7 @@ export default createComponent({ pages() { const pages = []; const pageCount = this.count; + const showPageSize = +this.showPageSize; if (this.mode !== 'multi') { return pages; @@ -56,19 +57,18 @@ export default createComponent({ // Default page limits let startPage = 1; let endPage = pageCount; - const isMaxSized = - this.showPageSize !== undefined && this.showPageSize < pageCount; + const isMaxSized = showPageSize < pageCount; // recompute if showPageSize if (isMaxSized) { // Current page is displayed in the middle of the visible ones - startPage = Math.max(this.value - Math.floor(this.showPageSize / 2), 1); - endPage = startPage + this.showPageSize - 1; + startPage = Math.max(this.value - Math.floor(showPageSize / 2), 1); + endPage = startPage + showPageSize - 1; // Adjust if limit is exceeded if (endPage > pageCount) { endPage = pageCount; - startPage = endPage - this.showPageSize + 1; + startPage = endPage - showPageSize + 1; } } @@ -79,7 +79,7 @@ export default createComponent({ } // Add links to move between page sets - if (isMaxSized && this.showPageSize > 0 && this.forceEllipses) { + if (isMaxSized && showPageSize > 0 && this.forceEllipses) { if (startPage > 1) { const previousPageSet = makePage(startPage - 1, '...', false); pages.unshift(previousPageSet);