Pagination: fix slot (#1846)

examples/docs/en-US/pagination.md

@@ -156,7 +156,7 @@ Add more modules based on your scenario.
 | 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 | — | — |
 | current-page | current page number | number | — | 1 |
-| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
+| 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] |
 
 ### Events
@@ -164,3 +164,8 @@ Add more modules based on your scenario.
 |---------|--------|---------|
 | size-change | triggers when `page-size` changes | the new `page-size` |
 | current-change | triggers when `current-page` changes | the new `current-page` |
+
+### Slot
+| Name | Description |
+| --- | --- |
+| — | custom content. To use this, you need to declare `slot` in `layout` |

examples/docs/zh-CN/pagination.md

@@ -206,7 +206,7 @@
 | total | 总条目数 | Number | — | - |
 | page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | - |
 | current-page | 当前页数 | Number | — | 1 |
-| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total` | 'prev, pager, next, jumper, ->, total'  |
+| layout | 组件布局，子组件名用逗号分隔| String | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | 每页显示个数选择器的选项设置 | Number[] | — |  [10, 20, 30, 40, 50, 100] |
 
 ### Events
@@ -214,3 +214,8 @@
 |---------|--------|---------|
 | size-change | pageSize 改变时会触发 | 每页条数`size` |
 | current-change | currentPage 改变时会触发 | 当前页`currentPage` |
+
+### Slot
+| name | 说明 |
+|------|--------|
+| — | 自定义内容，需要在 `layout` 中列出 `slot` |

packages/pagination/src/pagination.js

@@ -55,7 +55,7 @@ export default {
       pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
       next: <next></next>,
       sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
-      slot: <slot></slot>,
+      slot: <my-slot></my-slot>,
       total: <total></total>
     };
     const components = layout.split(',').map((item) => item.trim());
@@ -87,6 +87,15 @@ export default {
   },
 
   components: {
+    MySlot: {
+      render(h) {
+        return (
+          this.$parent.$slots.default
+          ? this.$parent.$slots.default[0]
+          : ''
+        );
+      }
+    },
     Prev: {
       render(h) {
         return (

test/unit/specs/pagination.spec.js

@@ -40,6 +40,20 @@ describe('Pagination', () => {
     expect(elm.querySelector('.el-pagination__total')).to.not.exist;
   });
 
+  it('custom slot', () => {
+    vm = createVue({
+      template: `
+        <el-pagination
+          layout="slot, prev, pager, next"
+          :page-size="25"
+          :total="100">
+          <span class="slot-test">slot test</span>
+        </el-pagination>
+      `
+    });
+    expect(vm.$el.querySelector('.slot-test')).to.exist;
+  });
+
   it('small', () => {
     vm = createTest(Pagination, {
       small: true