Add searchable table filters

examples/docs/en-US/table.md

@@ -1910,6 +1910,9 @@ You can customize row index in `type=index` columns.
 | filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |
 | filter-placement | placement for the filter dropdown | String | same as Tooltip's `placement` | — |
 | filter-multiple | whether data filtering supports multiple options | Boolean | — | true |
+| filter-search | whether the filter dropdown can search filtering options | Boolean | — | false |
+| filter-search-method | search method for filtering options. Receives `(query, filter)` and should return `true` when the option matches | Function(query, filter) | — | — |
+| filter-search-placeholder | placeholder for the filter search input | String | — | — |
 | filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row, column) | — | — |
 | filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
 

packages/table/src/filter-panel.vue

@@ -5,11 +5,19 @@
       v-if="multiple"
       v-clickoutside="handleOutsideClick"
       v-show="showPopper">
+      <div class="el-table-filter__search" v-if="filterSearch">
+        <el-input
+          size="mini"
+          v-model="filterText"
+          :placeholder="filterSearchPlaceholder || t('el.table.filterPlaceholder')"
+          clearable>
+        </el-input>
+      </div>
       <div class="el-table-filter__content">
         <el-scrollbar wrap-class="el-table-filter__wrap">
           <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
             <el-checkbox
-              v-for="filter in filters"
+              v-for="filter in filteredFilters"
               :key="filter.value"
               :label="filter.value">{{ filter.text }}</el-checkbox>
           </el-checkbox-group>
@@ -27,12 +35,20 @@
       v-else
       v-clickoutside="handleOutsideClick"
       v-show="showPopper">
+      <div class="el-table-filter__search" v-if="filterSearch">
+        <el-input
+          size="mini"
+          v-model="filterText"
+          :placeholder="filterSearchPlaceholder || t('el.table.filterPlaceholder')"
+          clearable>
+        </el-input>
+      </div>
       <ul class="el-table-filter__list">
         <li class="el-table-filter__list-item"
             :class="{ 'is-active': filterValue === undefined || filterValue === null }"
             @click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
         <li class="el-table-filter__list-item"
-            v-for="filter in filters"
+            v-for="filter in filteredFilters"
             :label="filter.value"
             :key="filter.value"
             :class="{ 'is-active': isActive(filter) }"
@@ -50,6 +66,7 @@
   import Dropdown from './dropdown';
   import ElCheckbox from 'element-ui/packages/checkbox';
   import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
+  import ElInput from 'element-ui/packages/input';
   import ElScrollbar from 'element-ui/packages/scrollbar';
 
   export default {
@@ -64,6 +81,7 @@
     components: {
       ElCheckbox,
       ElCheckboxGroup,
+      ElInput,
       ElScrollbar
     },
 
@@ -121,13 +139,39 @@
       return {
         table: null,
         cell: null,
-        column: null
+        column: null,
+        filterText: ''
       };
     },
 
     computed: {
       filters() {
-        return this.column && this.column.filters;
+        return this.column && this.column.filters || [];
+      },
+
+      filterSearch() {
+        return this.column && this.column.filterSearch;
+      },
+
+      filterSearchMethod() {
+        return this.column && this.column.filterSearchMethod;
+      },
+
+      filterSearchPlaceholder() {
+        return this.column && this.column.filterSearchPlaceholder;
+      },
+
+      filteredFilters() {
+        if (!this.filterSearch || !this.filterText) {
+          return this.filters;
+        }
+
+        if (typeof this.filterSearchMethod === 'function') {
+          return this.filters.filter(filter => this.filterSearchMethod(this.filterText, filter));
+        }
+
+        const filterText = this.filterText.toLowerCase();
+        return this.filters.filter(filter => String(filter.text).toLowerCase().indexOf(filterText) > -1);
       },
 
       filterValue: {
@@ -188,6 +232,13 @@
         if (val === true && parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex) {
           this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
         }
+        if (val === false) {
+          this.filterText = '';
+        }
+      },
+
+      filterText() {
+        this.$nextTick(() => this.updatePopper());
       }
     }
   };

packages/table/src/table-column.js

@@ -40,6 +40,9 @@ export default {
     selectable: Function,
     reserveSelection: Boolean,
     filterMethod: Function,
+    filterSearch: Boolean,
+    filterSearchMethod: Function,
+    filterSearchPlaceholder: String,
     filteredValue: Array,
     filters: Array,
     filterPlacement: String,
@@ -195,7 +198,7 @@ export default {
     },
 
     registerNormalWatchers() {
-      const props = ['label', 'property', 'filters', 'filterMultiple', 'sortable', 'index', 'formatter', 'className', 'labelClassName', 'showOverflowTooltip'];
+      const props = ['label', 'property', 'filters', 'filterMultiple', 'filterSearch', 'filterSearchMethod', 'filterSearchPlaceholder', 'sortable', 'index', 'formatter', 'className', 'labelClassName', 'showOverflowTooltip'];
       // 一些属性具有别名
       const aliases = {
         prop: 'property',
@@ -270,6 +273,7 @@ export default {
       filterable: this.filters || this.filterMethod,
       filteredValue: [],
       filterPlacement: '',
+      filterSearch: false,
       isColumnGroup: false,
       filterOpened: false,
       // sort 相关属性
@@ -281,7 +285,7 @@ export default {
     const basicProps = ['columnKey', 'label', 'className', 'labelClassName', 'type', 'renderHeader', 'formatter', 'fixed', 'resizable'];
     const sortProps = ['sortMethod', 'sortBy', 'sortOrders'];
     const selectProps = ['selectable', 'reserveSelection'];
-    const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement'];
+    const filterProps = ['filterMethod', 'filters', 'filterMultiple', 'filterOpened', 'filteredValue', 'filterPlacement', 'filterSearch', 'filterSearchMethod', 'filterSearchPlaceholder'];
 
     let column = this.getPropsData(basicProps, sortProps, selectProps, filterProps);
     column = mergeOptions(defaults, column);

packages/theme-chalk/src/table-column.scss

@@ -49,6 +49,11 @@
     min-width: 100px;
   }
 
+  @include e(search) {
+    min-width: 160px;
+    padding: 10px 10px 0;
+  }
+
   @include e(bottom) {
     border-top: 1px solid $--border-color-lighter;
     padding: 8px;
@@ -94,4 +99,4 @@
       margin-bottom: 0;
     }
   }
-}
+}

test/unit/specs/table.spec.js

@@ -298,6 +298,8 @@ describe('Table', () => {
                 { text: 'Peter Docter', value: 'Peter Docter' },
                 { text: 'Andrew Stanton', value: 'Andrew Stanton' }
               ]"
+              :filter-search="filterSearch"
+              :filter-search-method="filterSearchMethod"
               :filter-method="filterMethod"
               label="导演" />
             <el-table-column prop="runtime" label="时长（分）" />
@@ -308,6 +310,13 @@ describe('Table', () => {
           this.testData = getTestData();
         },
 
+        data() {
+          return {
+            filterSearch: false,
+            filterSearchMethod: null
+          };
+        },
+
         methods: {
           filterMethod(value, row) {
             return value === row.director;
@@ -360,6 +369,31 @@ describe('Table', () => {
       }, 100);
     });
 
+    it('filter search', done => {
+      vm.filterSearch = true;
+
+      vm.$nextTick(_ => {
+        const btn = vm.$el.querySelector('.el-table__column-filter-trigger');
+
+        triggerEvent(btn, 'click', true, false);
+        setTimeout(_ => {
+          const filter = document.body.querySelector('.el-table-filter');
+          const input = filter.querySelector('.el-table-filter__search input');
+
+          expect(input).to.exist;
+          input.value = 'Peter';
+          triggerEvent(input, 'input');
+
+          setTimeout(_ => {
+            const labels = toArray(filter.querySelectorAll('.el-checkbox__label')).map(label => label.textContent.trim());
+            expect(labels).to.eql(['Peter Docter']);
+            document.body.removeChild(filter);
+            done();
+          }, DELAY);
+        }, 100);
+      });
+    });
+
     it('click reset', done => {
       const btn = vm.$el.querySelector('.el-table__column-filter-trigger');
 

types/table-column.d.ts

@@ -109,6 +109,15 @@ export declare class ElTableColumn extends ElementUIComponent {
   /** Whether data filtering supports multiple options */
   filterMultiple: Boolean
 
+  /** Whether the filter panel can search filtering options */
+  filterSearch: boolean
+
+  /** Search method for filtering options */
+  filterSearchMethod: (query: string, filter: TableColumnFilter) => boolean
+
+  /** Placeholder for the filter search input */
+  filterSearchPlaceholder: string
+
   /** Data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` */
   filterMethod: (value: any, row: object) => boolean
 

web-types.json

@@ -3482,6 +3482,21 @@
               "description": "Whether data filtering supports multiple options",
               "type": "Boolean"
             },
+            {
+              "name": "filterSearch",
+              "description": "Whether the filter panel can search filtering options",
+              "type": "boolean"
+            },
+            {
+              "name": "filterSearchMethod",
+              "description": "Search method for filtering options",
+              "type": "(query: string, filter: TableColumnFilter) => boolean"
+            },
+            {
+              "name": "filterSearchPlaceholder",
+              "description": "Placeholder for the filter search input",
+              "type": "string"
+            },
             {
               "name": "resizable",
               "description": "Whether column width can be resized. Works when border of `el-table` is `true`",