Pagination: make page-size attribute supports .sync

ElemeFE · Aug 8, 2018 · e3c0008 · e3c0008
1 parent b1be1f4
commit e3c0008
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md
@@ -224,8 +224,8 @@ Add more modules based on your scenario.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
 | small              |   whether to use small pagination    | boolean |      —       | false |
-| background | whether the buttons have a background color | Boolean | — | false |
-| page-size              | item count of each page  | number |      —       | 10 |
+| background | whether the buttons have a background color | boolean | — | false |
+| page-size              | item count of each page, supports the .sync modifier  | 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 |

diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md
@@ -211,7 +211,7 @@ Agrega más modulos basados en su escenario.
 | Atributo     | Descripción                              | Tipo     | Valores aceptados                        | Por defecto                            |
 | ------------ | ---------------------------------------- | -------- | ---------------------------------------- | -------------------------------------- |
 | small        | usar paginación pequeña                  | boolean  | —                                        | false                                  |
-| page-size    | cantidad de elementos por página         | number   | —                                        | 10                                     |
+| page-size    | cantidad de elementos por página, soporta el modificador .sync         | 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  | número de paginadores. La paginación colapsa cuando el número total de páginas excede este valor. | number | odd number between 5 and 21 | 7 |

diff --git a/examples/docs/zh-CN/pagination.md b/examples/docs/zh-CN/pagination.md
@@ -223,15 +223,15 @@
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
-| small | 是否使用小型分页样式 | Boolean | — | false |
-| background | 是否为分页按钮添加背景色 | Boolean | — | false |
-| page-size | 每页显示条目个数 | Number | — | 10 |
-| total | 总条目数 | Number | — | — |
+| small | 是否使用小型分页样式 | boolean | — | false |
+| background | 是否为分页按钮添加背景色 | boolean | — | false |
+| page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 |
+| total | 总条目数 | number | — | — |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
-| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | Number | 大于等于 5 且小于等于 21 的奇数 | 7 |
-| current-page | 当前页数，支持 .sync 修饰符 | Number | — | 1 |
+| 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] |
+| page-sizes | 每页显示个数选择器的选项设置 | number[] | — |  [10, 20, 30, 40, 50, 100] |
 | popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
 | prev-text | 替代图标显示的上一页文字 | string | — | — |
 | next-text | 替代图标显示的下一页文字 | string | — | — |

diff --git a/packages/pagination/src/pagination.js b/packages/pagination/src/pagination.js
@@ -223,8 +223,9 @@ export default {
       components: { ElInput },
 
       watch: {
-        '$parent.internalPageSize'() {
+        '$parent.internalPageSize'(newVal) {
           this.$nextTick(() => {
+            this.$parent.$emit('update:pageSize', newVal);
             this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
           });
         }