Bläddra i källkod

Table: add toggleAllSelection method (#12047)

Jikkai Xiao 7 år sedan
förälder
incheckning
4130f2af40

+ 1 - 0
examples/docs/en-US/table.md

@@ -2003,6 +2003,7 @@ You can customize row index in `type=index` columns.
 |------|--------|-------|
 | clearSelection | used in multiple selection Table, clear user selection | — |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
+| toggleAllSelection | used in multiple selection Table, toggle the selected state of all rows | - |
 | toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
 | 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 | — |

+ 1 - 0
examples/docs/es/table.md

@@ -2006,6 +2006,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
 | ------------------ | ---------------------------------------- | ------------- |
 | clearSelection     | utilizado en selección múltiple de la tabla, limpiar selección | —     |
 | toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |
+| toggleAllSelection | used in multiple selection Table, toggle the selected state of all rows | - |
 | toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded |
 | 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 | —             |

+ 1 - 0
examples/docs/zh-CN/table.md

@@ -2063,6 +2063,7 @@
 | ---- | ---- | ---- |
 | clearSelection | 用于多选表格,清空用户的选择 | — |
 | toggleRowSelection | 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | row, selected |
+| toggleAllSelection | 用于多选表格,切换所有行的选中状态 | - |
 | toggleRowExpansion | 用于可展开表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) | row, expanded |
 | setCurrentRow | 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。 | row |
 | clearSort | 用于清空排序条件,数据会恢复成未排序的状态 | — |

+ 4 - 0
packages/table/src/table.vue

@@ -447,6 +447,10 @@
 
       sort(prop, order) {
         this.store.commit('sort', { prop, order });
+      },
+
+      toggleAllSelection() {
+        this.store.commit('toggleAllSelection');
       }
     },
 

+ 15 - 0
test/unit/specs/table.spec.js

@@ -1693,6 +1693,21 @@ describe('Table', () => {
       destroyVM(vm);
     });
 
+    it('toggleAllSelection', done => {
+      const vm = createTable('selection-change');
+      vm.$refs.table.toggleAllSelection();
+      setTimeout(() => {
+        expect(vm.selection).to.length(5);
+
+        vm.$refs.table.toggleAllSelection();
+        setTimeout(() => {
+          expect(vm.selection).to.length(0);
+          destroyVM(vm);
+          done();
+        }, 50);
+      }, 50);
+    });
+
     it('clearSelection', () => {
       const vm = createTable('selection-change');
       vm.$refs.table.toggleRowSelection(vm.testData[0]);

+ 5 - 0
types/table.d.ts

@@ -123,6 +123,11 @@ export declare class ElTable extends ElementUIComponent {
    */
   toggleRowSelection (row: object, selected?: boolean): void
 
+  /**
+   * Toggle or set all rows
+   */
+  toggleAllSelection (): void
+
   /**
    * Set a certain row as selected
    *