minor, table column filters popover

examples/docs/zh-CN/table.md

@@ -1500,9 +1500,14 @@
       sortable
       :info-icon="'el-icon-info'"
       :info-tooltip="'测试tooltip'"
+      :show-search-input="true"
+      :show-multiple-footer="false"
+      placeholder="kkk"
       width="180"
+      :filters2="[{text: '全部', value: ''}]"
       :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
       :filter-method="filterHandler"
+      filter-filters-change="filterFiltersChange"
     >
     </el-table-column>
     <el-table-column
@@ -1521,7 +1526,7 @@
       width="100"
       :filters="[{ text: '家', value: '家', icon: 'el-icon-warning' }, { text: '公司', value: '公司' }]"
       :filter-multiple="false"
-      :show-all-select-option="false"
+      :show-multiple-footer="false"
       :filter-change="filterTag"
       :filtered-value="filterTags"
       filter-placement="bottom-end">
@@ -1572,6 +1577,9 @@
       filterHandler(value, row, column) {
         const property = column['property'];
         return row[property] === value;
+      },
+      filterFiltersChange(value) {
+        console.log(value)
       }
     }
   }
@@ -2237,5 +2245,9 @@
 | filter-change | 复选内容更改时的返回数据, 当`show-multiple-footer`为false时可以使用。 | Function | - | - |
 | filter-icon | 筛选自定义icon。 | String | - | - |
 | show-all-select-option | 是否显示`全部`筛选项（筛选数据为单选时该字段可用），如为false可以通过`filter-change`函数获取筛选值。 ｜ Boolean | - | true |
+| show-search-input | 是否显示筛选项搜索框 | Boolean | - | false |
+| placeholder | 筛选项搜索框占位符文案 | String | - | - |
+| filter-filters-change | 筛选项搜索框搜索时过滤筛选项的方法 | Function | - | - |
+| filters2 | 特殊组的数据过滤的选项，数组格式，数组中的元素需要有 text 、 value 和 icon 属性。下划线分割 | Array[{ text, value, icon }] | — | — |
 | info-icon | info icon，用于提示列的解释 | String | - | - |
 | info-tooltip | 用于提示列的解释详细 | String | - | - |

packages/autocomplete/src/autocomplete.vue

@@ -236,7 +236,7 @@
         this.highlightedIndex = index;
         this.$el.querySelector('.el-input__inner').setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
       },
-      handleLoadingMore () {
+      handleLoadingMore() {
         this.loadingMore = true;
         let callback = (suggestions) => {
           this.loadingMore = false;
@@ -245,7 +245,7 @@
           } else {
             console.error('autocomplete suggestions must be an array');
           }
-        }
+        };
         this.$emit('loadMore', callback);
       }
     },

packages/select/src/option.vue

@@ -138,10 +138,10 @@
         }
       },
 
-      onPrefixIconClick (event) {
-        event.preventDefault()
-        event.stopPropagation()
-        this.$emit('prefix-icon-click', this.value)
+      onPrefixIconClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.$emit('prefix-icon-click', this.value);
       }
     },
 

packages/table/src/filter-panel.vue

@@ -1,5 +1,13 @@
 <template>
-  <transition name="el-zoom-in-top">
+  <transition name="el-zoom-in-top">{{showMultipleFooter}}
+    <div class="el-table-filter-search" v-if="showSearchInput">
+      <el-input
+        :placeholder="placeholder"
+        @change="filterFilters"
+        v-model.trim="searchValue">
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+    </div>
     <div class="el-table-filter" v-if="multiple" v-show="showPopper">
       <div class="el-table-filter__content">
         <div>{{filterPanelTop}}</div>
@@ -8,6 +16,13 @@
             v-for="filter in filters"
             :key="filter.value"
             :label="filter.value"><i :class="['filter-icon', filter.icon]" v-if="filter.icon"></i>{{ filter.text }}</el-checkbox>
+          <template v-if="filters2 && filters2.length">
+            <div class="filter-line"></div>
+            <el-checkbox
+              v-for="filter in filters2"
+              :key="filter.value"
+              :label="filter.value"><i :class="['filter-icon', filter.icon]" v-if="filter.icon"></i>{{ filter.text }}</el-checkbox>
+          </template>
         </el-checkbox-group>
       </div>
       <div class="el-table-filter__bottom" v-show="showMultipleFooter">
@@ -29,6 +44,15 @@
             :key="filter.value"
             :class="{ 'is-active': isActive(filter) }"
             @click="handleSelect(filter.value)" >{{ filter.text }}</li>
+        <template v-if="filters2 && filters2.length">
+          <div class="filter-line"></div>
+          <li class="el-table-filter__list-item"
+            v-for="filter in filters2"
+            :label="filter.value"
+            :key="filter.value"
+            :class="{ 'is-active': isActive(filter) }"
+            @click="handleSelect(filter.value)" >{{ filter.text }}</li>
+        </template>
       </ul>
     </div>
   </transition>
@@ -66,6 +90,15 @@
         type: Boolean,
         default: true
       },
+      showSearchInput: {
+        type: Boolean,
+        default: false
+      },
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      filterFiltersChange: Function,
       filterChange: Function,
       filterPanelTop: Number
     },
@@ -135,14 +168,21 @@
         if (typeof this.filterChange === 'function') {
           this.filterChange(val);
         }
+      },
+      filterFilters(val) {
+        if (!this.showSearchInput) return;
+        if (typeof this.filterFiltersChange === 'function') {
+          this.filterFiltersChange(val);
+        }
       }
     },
 
     data() {
       return {
         table: null,
         cell: null,
-        column: null
+        column: null,
+        searchValue: ''
       };
     },
 
@@ -151,6 +191,10 @@
         return this.column && this.column.filters;
       },
 
+      filters2() {
+        return this.column && this.column.filters2;
+      },
+
       filterValue: {
         get() {
           return (this.column.filteredValue || [])[0];