feat: 拖拽调整列宽时触发回调on-col-width-resize⌚事件

tm-fe · Jan 6, 2020 · ca853b1 · ca853b1
1 parent 1d3c8d0
commit ca853b1
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/examples/features/resizable.vue b/examples/features/resizable.vue
@@ -11,7 +11,7 @@
                     :height="height"
                     :minWidth="40"
                     :maxWidth="300"
-                    @on-col-resize="onResizeWidth"
+                    @on-col-width-resize="onResizeWidth"
                     @on-sort-change="onSortChange"></flex-table>
     </div>
 </template>
@@ -80,8 +80,11 @@ export default {
         onSortChange(obj) {
             console.log(obj);
         },
-        onResizeWidth(obj) {
-            console.log(obj);
+        onResizeWidth(newWidth, oldWidth, column, event) {
+            console.log(`newWidth--${newWidth}`);
+            console.log(`oldWidth--${oldWidth}`);
+            console.log(`column--${JSON.stringify(column)}`);
+            console.log(event);
         }
     }
 }

diff --git a/src/table.vue b/src/table.vue
@@ -243,6 +243,12 @@ export default {
                 minX: 0, // 可拖动调整最小值
                 maxX: Infinity, // 可拖动调整最大值
             },
+            emitColResize: {
+                newWidth: 0,
+                oldWidth: 0,
+                column: {},
+                event: null
+            }
         }
     },
     computed: {
@@ -490,6 +496,16 @@ export default {
                 colResize.currentX = 0;
                 colResize.resizeIndex = -1;
                 this.doLayout();
+                this.emitColResize.newWidth = finalX;
+                this.emitColResize.event = e;
+
+                // 列宽拖拽结束后，回调返回
+                this.$emit('on-col-width-resize', 
+                            this.emitColResize.newWidth, 
+                            this.emitColResize.oldWidth, 
+                            this.emitColResize.column, 
+                            this.emitColResize.event
+                )
             }
         },
         onColResizeStart(e, index) {
@@ -508,6 +524,8 @@ export default {
                 if (maxWidth !== undefined) {
                     colResize.maxX = maxWidth - colWidth;
                 }
+                this.emitColResize.oldWidth  = colWidth;
+                this.emitColResize.column = this.columns[index];
             }
         },
         onTableScrollX(event) {
@@ -606,7 +624,6 @@ export default {
                     'min-width': Math.max(nTableWidth, nTotalWidth)+'px'
                 };
                 this.calWidth = oWidth;
-                this.$emit('on-col-resize', this.calWidth);
             });
         },
         onRowHeightChange(row) {

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -50,4 +50,17 @@ export declare class FlexTable extends Vue {
         eventName: "on-sort-change",
         option: sortOption
     ): this;
+
+    /**
+     * 拖拽调整列宽时触发
+     * @returns newWidth, oldWidth, column, event
+     * 
+     */
+    $emit(
+        eventName: "on-col-width-resize",
+        newWidth: number,
+        oldWidth: number,
+        column: object,
+        event: MouseEvent
+    ): this;
 }