From 789581edf3929af99c06d3988c49657f7d79a3d0 Mon Sep 17 00:00:00 2001 From: justwiner <30335393+justwiner@users.noreply.github.com> Date: Fri, 5 Feb 2021 14:46:31 +0800 Subject: [PATCH] fix(table): fix shadow rendering bug of initializing fixed columns (#1418) fix #1353 Co-authored-by: winerlu --- packages/table/src/table-layout.ts | 38 +++++++++++++----------- packages/table/src/table.vue | 6 ++-- packages/table/src/table/style-helper.ts | 18 ++++++++--- packages/table/src/table/utils-helper.ts | 12 ++------ 4 files changed, 40 insertions(+), 34 deletions(-) diff --git a/packages/table/src/table-layout.ts b/packages/table/src/table-layout.ts index 6eb9ef4756..7ffb5d4a60 100644 --- a/packages/table/src/table-layout.ts +++ b/packages/table/src/table-layout.ts @@ -2,7 +2,13 @@ import { nextTick, ref, isRef, Ref } from 'vue' import scrollbarWidth from '@element-plus/utils/scrollbar-width' import isServer from '@element-plus/utils/isServer' import { parseHeight } from './util' -import { AnyObject, Table, Store, TableHeader, TableColumnCtx } from './table.type' +import { + AnyObject, + Table, + Store, + TableHeader, + TableColumnCtx, +} from './table.type' class TableLayout { observers: TableHeader[] @@ -26,7 +32,7 @@ class TableLayout { bodyHeight: Ref // Table Height - Table Header Height fixedBodyHeight: Ref // Table Height - Table Header Height - Scroll Bar Height gutterWidth: number - constructor(options: AnyObject) { + constructor (options: AnyObject) { this.observers = [] this.table = null this.store = null @@ -64,7 +70,7 @@ class TableLayout { } } - updateScrollY() { + updateScrollY () { const height = this.height.value if (height === null) return false const bodyWrapper = this.table.refs.bodyWrapper as HTMLElement @@ -78,7 +84,7 @@ class TableLayout { return false } - setHeight(value: string | number, prop = 'height') { + setHeight (value: string | number, prop = 'height') { if (isServer) return const el = this.table.vnode.el value = parseHeight(value) @@ -96,11 +102,11 @@ class TableLayout { } } - setMaxHeight(value: string | number) { + setMaxHeight (value: string | number) { this.setHeight(value, 'max-height') } - getFlattenColumns(): TableColumnCtx[] { + getFlattenColumns (): TableColumnCtx[] { const flattenColumns = [] const columns = this.table.store.states.columns.value columns.forEach(column => { @@ -115,7 +121,7 @@ class TableLayout { return flattenColumns } - updateElsHeight() { + updateElsHeight () { if (!this.table.$ready) return nextTick(() => this.updateElsHeight()) const { headerWrapper: headerWrapper_, @@ -167,7 +173,7 @@ class TableLayout { this.notifyObservers('scrollable') } - headerDisplayNone(elm: HTMLElement) { + headerDisplayNone (elm: HTMLElement) { if (!elm) return true let headerChild = elm while (headerChild.tagName !== 'DIV') { @@ -179,7 +185,7 @@ class TableLayout { return false } - updateColumnsWidth() { + updateColumnsWidth () { if (isServer) return const fit = this.fit const bodyWidth = this.table.vnode.el.clientWidth @@ -233,7 +239,7 @@ class TableLayout { } else { // HAVE HORIZONTAL SCROLL BAR this.scrollX.value = true - flexColumns.forEach(function(column) { + flexColumns.forEach(function (column) { column.realWidth = column.minWidth }) } @@ -258,7 +264,7 @@ class TableLayout { if (fixedColumns.length > 0) { let fixedWidth = 0 - fixedColumns.forEach(function(column) { + fixedColumns.forEach(function (column) { fixedWidth += column.realWidth || column.width }) @@ -268,29 +274,27 @@ class TableLayout { const rightFixedColumns = this.store.states.rightFixedColumns.value if (rightFixedColumns.length > 0) { let rightFixedWidth = 0 - rightFixedColumns.forEach(function(column) { + rightFixedColumns.forEach(function (column) { rightFixedWidth += column.realWidth || column.width }) this.rightFixedWidth.value = rightFixedWidth } - this.notifyObservers('columns') - this.updateElsHeight() } - addObserver(observer: TableHeader) { + addObserver (observer: TableHeader) { this.observers.push(observer) } - removeObserver(observer: TableHeader) { + removeObserver (observer: TableHeader) { const index = this.observers.indexOf(observer) if (index !== -1) { this.observers.splice(index, 1) } } - notifyObservers(event: string) { + notifyObservers (event: string) { const observers = this.observers observers.forEach(observer => { switch (event) { diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index d32cbbb5d4..447be30a0d 100644 --- a/packages/table/src/table.vue +++ b/packages/table/src/table.vue @@ -397,9 +397,8 @@ export default defineComponent({ toggleAllSelection, toggleRowExpansion, clearSort, - doLayout, sort, - } = useUtils(store, layout, shouldUpdateHeight) + } = useUtils(store) const { isHidden, renderExpanded, @@ -416,7 +415,8 @@ export default defineComponent({ resizeProxyVisible, bodyWidth, resizeState, - } = useStyle(props, layout, store, table, doLayout) + doLayout, + } = useStyle(props, layout, store, table) const debouncedUpdateLayout = debounce(() => doLayout(), 50) diff --git a/packages/table/src/table/style-helper.ts b/packages/table/src/table/style-helper.ts index 22be92cef7..07b6ae2ec9 100644 --- a/packages/table/src/table/style-helper.ts +++ b/packages/table/src/table/style-helper.ts @@ -12,16 +12,14 @@ import { TableLayout, Store, TableColumnCtx, - fn, } from '../table.type' import { useGlobalConfig } from '@element-plus/utils/util' -function useStyle( +function useStyle ( props: TableProps, layout: TableLayout, store: Store, table: Table, - doLayout: fn, ) { const $ElEMENT = useGlobalConfig() const isHidden = ref(false) @@ -81,6 +79,15 @@ function useStyle( store.states.rightFixedColumns.value.length > 0 ) }) + + const doLayout = () => { + if (shouldUpdateHeight.value) { + layout.updateElsHeight() + } + layout.updateColumnsWidth() + syncPostion() + } + onMounted(() => { setScrollClass('is-scrolling-left') bindEvents() @@ -116,7 +123,8 @@ function useStyle( const { bodyWrapper } = table.refs setScrollClassByEl(bodyWrapper, className) } - const syncPostion = throttle(function() { + const syncPostion = throttle(function () { + if (!table.refs.bodyWrapper) return const { scrollLeft, scrollTop, @@ -142,6 +150,7 @@ function useStyle( setScrollClass('is-scrolling-middle') } }, 10) + const bindEvents = () => { table.refs.bodyWrapper.addEventListener('scroll', syncPostion, { passive: true, @@ -319,6 +328,7 @@ function useStyle( resizeProxyVisible, bodyWidth, resizeState, + doLayout, } } diff --git a/packages/table/src/table/utils-helper.ts b/packages/table/src/table/utils-helper.ts index 73ffc48530..042a0ef7e5 100644 --- a/packages/table/src/table/utils-helper.ts +++ b/packages/table/src/table/utils-helper.ts @@ -1,7 +1,6 @@ -import { ComputedRef } from 'vue' -import { Store, AnyObject, TableLayout } from '../table.type' +import { Store, AnyObject } from '../table.type' -function useUtils(store: Store, layout: TableLayout, shouldUpdateHeight: ComputedRef) { +function useUtils (store: Store) { const setCurrentRow = (row: AnyObject) => { store.commit('setCurrentRow', row) } @@ -24,12 +23,6 @@ function useUtils(store: Store, layout: TableLayout, shouldUpdateHeight: Compute const clearSort = () => { store.clearSort() } - const doLayout = () => { - if (shouldUpdateHeight.value) { - layout.updateElsHeight() - } - layout.updateColumnsWidth() - } const sort = (prop, order) => { store.commit('sort', { prop, order }) } @@ -42,7 +35,6 @@ function useUtils(store: Store, layout: TableLayout, shouldUpdateHeight: Compute toggleAllSelection, toggleRowExpansion, clearSort, - doLayout, sort, } }