From 270a4f96adb738a9d3c70626dc9b24cdd2704385 Mon Sep 17 00:00:00 2001
From: justwiner <30335393+justwiner@users.noreply.github.com>
Date: Sun, 11 Apr 2021 20:58:13 +0800
Subject: [PATCH] fix(table): fix: page resize event not monitor (#1790)

Monitor the page size change event, update the table layout

fix #1691

Co-authored-by: winerlu <winerlu@tencent.com>
---
 packages/table/src/table/style-helper.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/table/src/table/style-helper.ts b/packages/table/src/table/style-helper.ts
index a7268a4681..b368d0561f 100644
--- a/packages/table/src/table/style-helper.ts
+++ b/packages/table/src/table/style-helper.ts
@@ -3,6 +3,7 @@ import {
   addResizeListener,
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
+import type { ResizableElement } from '@element-plus/utils/resize-event'
 import throttle from 'lodash/throttle'
 import { parseHeight } from '../util'
 import {
@@ -153,13 +154,12 @@ function useStyle (
   }, 10)
 
   const bindEvents = () => {
+    window.addEventListener('resize', doLayout)
     table.refs.bodyWrapper.addEventListener('scroll', syncPostion, {
       passive: true,
     })
     if (props.fit) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      addResizeListener(table.vnode.el, resizeListener)
+      addResizeListener(table.vnode.el as ResizableElement, resizeListener)
     }
   }
   onUnmounted(() => {
@@ -167,10 +167,9 @@ function useStyle (
   })
   const unbindEvents = () => {
     table.refs.bodyWrapper?.removeEventListener('scroll', syncPostion, true)
+    window.removeEventListener('resize', doLayout)
     if (props.fit) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      removeResizeListener(table.vnode.el, resizeListener)
+      removeResizeListener(table.vnode.el as ResizableElement, resizeListener)
     }
   }
   const resizeListener = () => {