Table: add filter change event & add column-key for column.

examples/docs/en-US/table.md

@@ -1385,6 +1385,7 @@ Customize table column so it can be integrated with other components.
 | row-dblclick | triggers when double clicking a row | row, event |
 | header-click | triggers when clicking a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
+| filter-change | triggers when column's filter condition changes. One object parameter which key is column's columnKey and key's value is filtered values of the column | filters | 
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |
 
 ### Table Methods
@@ -1398,6 +1399,7 @@ Customize table column so it can be integrated with other components.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1)  | string | selection/index | — |
 | label | column label | string | — | — |
+| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | - | - |
 | prop |  field name. You can also use its alias: `property` | string | — | — |
 | width | column width | string | — | — |
 | min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — |

examples/docs/zh-CN/table.md

@@ -1393,6 +1393,7 @@
 | row-dblclick | 当某一行被双击时会触发该事件 | row, event |
 | header-click | 当某一列的表头被点击时会触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
+| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
 
 ### Table Methods
@@ -1405,6 +1406,7 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
+| column-key | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | - | - |
 | label | 显示的标题 | string | — | — |
 | prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
 | width | 对应列的宽度 | string | — | — |

packages/table/src/table-column.js

@@ -112,6 +112,7 @@ export default {
       default: true
     },
     context: {},
+    columnKey: String,
     align: String,
     showTooltipWhenOverflow: Boolean,
     showOverflowTooltip: Boolean,
@@ -165,7 +166,7 @@ export default {
       return (<div>{ this._t('default') }</div>);
     };
 
-    let columnId = this.columnId = (this.$parent.tableId || (this.$parent.columnId + '_')) + 'column_' + columnIdSeed++;
+    let columnId = this.columnId = this.columnKey || ((this.$parent.tableId || (this.$parent.columnId + '_')) + 'column_' + columnIdSeed++);
 
     let parent = this.$parent;
     let owner = this.owner;

packages/table/src/table-store.js

@@ -157,6 +157,8 @@ TableStore.prototype.mutations = {
     states.filteredData = data;
     states.data = sortData(data, states);
 
+    this.table.$emit('filter-change', filters);
+
     Vue.nextTick(() => this.table.updateScrollY());
   },
 

test/unit/specs/table.spec.js

@@ -195,11 +195,12 @@ describe('Table', () => {
     beforeEach(done => {
       vm = createVue({
         template: `
-          <el-table ref="table" :data="testData">
+          <el-table ref="table" :data="testData" @filter-change="handleFilterChange">
             <el-table-column prop="name" label="片名" />
             <el-table-column prop="release" label="发行日期" />
             <el-table-column
               prop="director"
+              column-key="director"
               :filters="[
                 { text: 'John Lasseter', value: 'John Lasseter' },
                 { text: 'Peter Docter', value: 'Peter Docter' },
@@ -218,6 +219,9 @@ describe('Table', () => {
         methods: {
           filterMethod(value, row) {
             return value === row.director;
+          },
+          handleFilterChange(filters) {
+            this.filters = filters;
           }
         }
       }, true);
@@ -255,6 +259,7 @@ describe('Table', () => {
         setTimeout(_ => {
           triggerEvent(filter.querySelector('.el-table-filter__bottom button'), 'click', true, false);
           setTimeout(_ => {
+            expect(vm.filters['director']).to.be.eql(['John Lasseter']);
             expect(vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')).to.length(3);
             document.body.removeChild(filter);
             done();
@@ -276,6 +281,7 @@ describe('Table', () => {
           // reset button
           triggerEvent(filter.querySelectorAll('.el-table-filter__bottom button')[1], 'click', true, false);
           setTimeout(_ => {
+            expect(vm.filters['director']).to.be.eql([]);
             expect(filter.querySelector('.el-table-filter__bottom button').classList.contains('is-disabled')).to.true;
             document.body.removeChild(filter);
             destroyVM(vm);