Table: Add header-dragend.

examples/docs/en-US/table.md

@@ -1474,6 +1474,7 @@ When the row content is too long and you do not want to display the horizontal s
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
 | filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |
+| header-dragend | triggers when finish dragging header | newWidth, oldWidth, column, event |
 | expand | triggers when user expands or collapses a row | row, expanded |
 
 ### Table Methods

examples/docs/zh-CN/table.md

@@ -1556,6 +1556,7 @@
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
 | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
+| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
 | expand | 当用户对某一行展开或者关闭的上会触发该事件 | row, expanded |
 
 ### Table Methods

packages/table/src/table-header.js

@@ -286,7 +286,8 @@ export default {
 
         this.$parent.resizeProxyVisible = true;
 
-        const tableEl = this.$parent.$el;
+        const table = this.$parent;
+        const tableEl = table.$el;
         const tableLeft = tableEl.getBoundingClientRect().left;
         const columnEl = this.$el.querySelector(`th.${column.id}`);
         const columnRect = columnEl.getBoundingClientRect();
@@ -301,7 +302,7 @@ export default {
           tableLeft
         };
 
-        const resizeProxy = this.$parent.$refs.resizeProxy;
+        const resizeProxy = table.$refs.resizeProxy;
         resizeProxy.style.left = this.dragState.startLeft + 'px';
 
         document.onselectstart = function() { return false; };
@@ -316,9 +317,14 @@ export default {
 
         const handleMouseUp = () => {
           if (this.dragging) {
+            const {
+              startColumnLeft,
+              startLeft
+            } = this.dragState;
             const finalLeft = parseInt(resizeProxy.style.left, 10);
-            const columnWidth = finalLeft - this.dragState.startColumnLeft;
+            const columnWidth = finalLeft - startColumnLeft;
             column.width = column.realWidth = columnWidth;
+            table.$emit('header-dragend', column.width, startLeft - startColumnLeft, column, event);
 
             this.store.scheduleLayout();
 
@@ -327,7 +333,7 @@ export default {
             this.draggingColumn = null;
             this.dragState = {};
 
-            this.$parent.resizeProxyVisible = false;
+            table.resizeProxyVisible = false;
           }
 
           document.removeEventListener('mousemove', handleMouseMove);