Table: support manually sorting. Resolves #9495

ElemeFE · May 23, 2018 · 3e9996c · 3e9996c
1 parent 66c7b3c
commit 3e9996c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 1 deletion.
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
@@ -2007,7 +2007,8 @@ You can customize row index in `type=index` columns.
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
 | clearSort | clear sorting, restore data to the original order | — |
 | clearFilter | clear filter | — |
-| doLayout | Refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |
+| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |
+| sort | sort Table manually by current conditions | — |
 
 ### Table Slot
 | Name | Description |

diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md
@@ -2010,6 +2010,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | setCurrentRow      | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row           |
 | clearSort          | limpiar ordenamiento, restaurar datos a orden original | —             |
 | clearFilter        | limpiar filtros                          | —             |
+| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |
+| sort | sort Table manually by current conditions | — |
 
 ### Slots de la tabla
 | Nombre | Descripción                              |

diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
@@ -2068,6 +2068,7 @@
 | clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
 | clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | — |
 | doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |
+| sort | 手动使 Table 依据当前排序规则重新排序。 | — |
 
 ### Table Slot
 | name | 说明 |

diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
@@ -443,6 +443,10 @@
         if (this.shouldUpdateHeight) {
           this.layout.updateElsHeight();
         }
+      },
+
+      sort() {
+        this.store.commit('changeSortCondition');
       }
     },
 

diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
@@ -1709,6 +1709,43 @@ describe('Table', () => {
 
       destroyVM(vm);
     });
+
+    it('sort', done => {
+      const vm = createVue({
+        template: `
+          <el-table ref="table" :data="testData" :default-sort = "{prop: 'runtime', order: 'ascending'}">
+            <el-table-column prop="name" />
+            <el-table-column prop="release" />
+            <el-table-column prop="director" />
+            <el-table-column prop="runtime"/>
+          </el-table>
+        `,
+
+        created() {
+          this.testData = getTestData();
+        },
+
+        data() {
+          return { testData: this.testData };
+        }
+      });
+
+      setTimeout(() => {
+        const lastCells = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr td:last-child');
+        expect(toArray(lastCells).map(node => node.textContent))
+          .to.eql(['80', '92', '92', '95', '100']);
+
+        vm.$nextTick(() => {
+          vm.testData = vm.testData.map(data => Object.assign(data, { runtime: -data.runtime }));
+          vm.$refs.table.sort();
+          vm.$nextTick(() => {
+            expect(toArray(lastCells).map(node => node.textContent))
+              .to.eql(['-100', '-95', '-92', '-92', '-80']);
+            done();
+          });
+        });
+      }, DELAY);
+    });
   });
 
   it('hover', done => {

diff --git a/types/table.d.ts b/types/table.d.ts
@@ -116,4 +116,7 @@ export declare class ElTable extends ElementUIComponent {
 
   /** Relayout the table, maybe needed when change the table or it's ancestors visibility */
   doLayout (): void
+
+  /** Sort Table manually by current conditions */
+  sort (): void
 }