Table: Add clear filter

packages/table/src/table-store.js

 import Vue from 'vue';
 import debounce from 'throttle-debounce/debounce';
+import merge from 'element-ui/src/utils/merge';
 import { orderBy, getColumnById, getRowIdentity } from './util';
 
 const sortData = (data, states) => {
@@ -407,6 +408,33 @@ TableStore.prototype.cleanSelection = function() {
   }
 };
 
+TableStore.prototype.clearFilter = function() {
+  const states = this.states;
+  const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
+  let panels = {};
+
+  if (tableHeader) panels = merge(panels, tableHeader.filterPanels);
+  if (fixedTableHeader) panels = merge(panels, fixedTableHeader.filterPanels);
+  if (rightFixedTableHeader) panels = merge(panels, rightFixedTableHeader.filterPanels);
+
+  const keys = Object.keys(panels);
+  if (!keys.length) return;
+
+  keys.forEach(key => {
+    panels[key].filteredValue = [];
+  });
+
+  states.filters = {};
+
+  this.commit('filterChange', {
+    column: {},
+    values: [],
+    silent: true
+  });
+
+  this.table.$emit('filter-clear');
+};
+
 TableStore.prototype.updateAllSelected = function() {
   const states = this.states;
   const { selection, rowKey, selectable, data } = states;

packages/table/src/table.vue

@@ -14,6 +14,7 @@
     <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
     <div class="el-table__header-wrapper" ref="headerWrapper" v-if="showHeader">
       <table-header
+        ref="tableHeader"
         :store="store"
         :layout="layout"
         :border="border"
@@ -59,6 +60,7 @@
       ]">
       <div class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper" v-if="showHeader">
         <table-header
+          ref="fixedTableHeader"
           fixed="left"
           :border="border"
           :store="store"
@@ -103,6 +105,7 @@
       ]">
       <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper" v-if="showHeader">
         <table-header
+          ref="rightFixedTableHeader"
           fixed="right"
           :border="border"
           :store="store"
@@ -243,6 +246,10 @@
         this.store.clearSelection();
       },
 
+      clearFilter() {
+        this.store.clearFilter();
+      },
+
       handleMouseLeave() {
         this.store.commit('setHoverRow', null);
         if (this.hoverState) this.hoverState = null;