From 6c5cfbfce65aecef00536ee062281d1557f33a20 Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Thu, 16 Jan 2025 10:12:23 +0100
Subject: [PATCH] fix(components): [table-footer] update cols width on layout
 change (#19064)

fix(components): [table-footer]

update cols width on layout change

closed #19054

Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>
---
 packages/components/table/src/table-footer/index.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/components/table/src/table-footer/index.ts b/packages/components/table/src/table-footer/index.ts
index 99a31cd8fc..0a1ba86e42 100644
--- a/packages/components/table/src/table-footer/index.ts
+++ b/packages/components/table/src/table-footer/index.ts
@@ -1,6 +1,8 @@
 // @ts-nocheck
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
+import useLayoutObserver from '../layout-observer'
+import { TABLE_INJECTION_KEY } from '../tokens'
 import useStyle from './style-helper'
 import type { Store } from '../store'
 
@@ -43,12 +45,17 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const parent = inject(TABLE_INJECTION_KEY)
+    const ns = useNamespace('table')
     const { getCellClasses, getCellStyles, columns } = useStyle(
       props as TableFooter<DefaultRow>
     )
-    const ns = useNamespace('table')
+    const { onScrollableChange, onColumnsChange } = useLayoutObserver(parent!)
+
     return {
       ns,
+      onScrollableChange,
+      onColumnsChange,
       getCellClasses,
       getCellStyles,
       columns,