Table: hide table when nested in an invisible container

packages/table/src/table.vue

@@ -4,6 +4,7 @@
       'el-table--fit': fit,
       'el-table--striped': stripe,
       'el-table--border': border,
+      'el-table--hidden': isHidden,
       'el-table--fluid-height': maxHeight,
       'el-table--enable-row-hover': !store.states.isComplex,
       'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
@@ -291,6 +292,9 @@
           } else if (this.shouldUpdateHeight) {
             this.layout.updateHeight();
           }
+          if (this.$el) {
+            this.isHidden = this.$el.clientWidth === 0;
+          }
         });
       }
     },
@@ -451,6 +455,7 @@
       return {
         store,
         layout,
+        isHidden: false,
         renderExpanded: null,
         resizeProxyVisible: false
       };

packages/theme-default/src/table.css

@@ -146,6 +146,10 @@
       }
     }
 
+    @modifier hidden {
+      visibility: hidden;
+    }
+
     & th {
       background-color: var(--table-header-background);
       text-align: left;