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>
This commit is contained in:
justwiner 2021-04-11 20:58:13 +08:00 committed by GitHub
parent fa109bb5a7
commit 270a4f96ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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