Table: fix header table not display (ElemeFE#17341)

Author: ziyoung

packages/table/src/layout-observer.js

@@ -33,10 +33,10 @@ export default {
   },
 
   methods: {
-    onColumnsChange() {
+    onColumnsChange(layout) {
       const cols = this.$el.querySelectorAll('colgroup > col');
       if (!cols.length) return;
-      const flattenColumns = this.tableLayout.getFlattenColumns();
+      const flattenColumns = layout.getFlattenColumns();
       const columnsMap = {};
       flattenColumns.forEach((column) => {
         columnsMap[column.id] = column;

packages/table/src/table-layout.js

@@ -97,7 +97,7 @@ class TableLayout {
     if (this.showHeader && !headerWrapper) return;
 
     // fix issue (https://github.com/ElemeFE/element/pull/16956)
-    const headerTrElm = headerWrapper.querySelector('.el-table__header tr');
+    const headerTrElm = headerWrapper ? headerWrapper.querySelector('.el-table__header tr') : null;
     const noneHeader = this.headerDisplayNone(headerTrElm);
 
     const headerHeight = this.headerHeight = !this.showHeader ? 0 : headerWrapper.offsetHeight;
@@ -119,6 +119,7 @@ class TableLayout {
   }
 
   headerDisplayNone(elm) {
+    if (!elm) return true;
     let headerChild = elm;
     while (headerChild.tagName !== 'DIV') {
       if (getComputedStyle(headerChild).display === 'none') {

packages/table/src/table.vue

@@ -383,6 +383,7 @@
       updateScrollY() {
         const changed = this.layout.updateScrollY();
         if (changed) {
+          this.layout.notifyObservers('scrollable');
           this.layout.updateColumnsWidth();
         }
       },