fix(table): fix the filter panel is covered (#601)

Co-authored-by: winerlu <winerlu@tencent.com>
Co-authored-by: zazzaz <izazzaz@hotmail.com>

packages/table/src/filter-panel.vue

@@ -8,6 +8,7 @@
     trigger="click"
     effect="light"
     popper-class="el-table-filter el-table-filter-padding"
+    append-to-body
   >
     <template #default>
       <div v-if="multiple">

packages/table/src/table.vue

@@ -1,17 +1,22 @@
 <template>
   <div
-    :class="[{
-      'el-table--fit': fit,
-      'el-table--striped': stripe,
-      'el-table--border': border || isGroup,
-      'el-table--hidden': isHidden,
-      'el-table--group': isGroup,
-      'el-table--fluid-height': maxHeight,
-      'el-table--scrollable-x': layout.scrollX.value,
-      'el-table--scrollable-y': layout.scrollY.value,
-      'el-table--enable-row-hover': !store.states.isComplex.value,
-      'el-table--enable-row-transition': (store.states.data.value || []).length !== 0 && (store.states.data.value || []).length < 100
-    }, tableSize ? `el-table--${ tableSize }` : '']"
+    :class="[
+      {
+        'el-table--fit': fit,
+        'el-table--striped': stripe,
+        'el-table--border': border || isGroup,
+        'el-table--hidden': isHidden,
+        'el-table--group': isGroup,
+        'el-table--fluid-height': maxHeight,
+        'el-table--scrollable-x': layout.scrollX.value,
+        'el-table--scrollable-y': layout.scrollY.value,
+        'el-table--enable-row-hover': !store.states.isComplex.value,
+        'el-table--enable-row-transition':
+          (store.states.data.value || []).length !== 0 &&
+          (store.states.data.value || []).length < 100,
+      },
+      tableSize ? `el-table--${tableSize}` : '',
+    ]"
     class="el-table"
     @mouseleave="handleMouseLeave()"
   >
@@ -30,14 +35,18 @@
         :default-sort="defaultSort"
         :store="store"
         :style="{
-          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : ''
+          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : '',
         }"
         @set-drag-visible="setDragVisible"
       />
     </div>
     <div
       ref="bodyWrapper"
-      :class="[layout.scrollX.value ? `is-scrolling-${scrollPosition}` : 'is-scrolling-none']"
+      :class="[
+        layout.scrollX.value
+          ? `is-scrolling-${scrollPosition}`
+          : 'is-scrolling-none',
+      ]"
       :style="[bodyHeight]"
       class="el-table__body-wrapper"
     >
@@ -49,7 +58,7 @@
         :store="store"
         :stripe="stripe"
         :style="{
-          width: bodyWidth
+          width: bodyWidth,
         }"
       />
       <div
@@ -62,7 +71,11 @@
           <slot name="empty">{{ emptyText || t('el.table.emptyText') }}</slot>
         </span>
       </div>
-      <div v-if="$slots.append" ref="appendWrapper" class="el-table__append-wrapper">
+      <div
+        v-if="$slots.append"
+        ref="appendWrapper"
+        class="el-table__append-wrapper"
+      >
         <slot name="append"></slot>
       </div>
     </div>
@@ -78,7 +91,7 @@
         :default-sort="defaultSort"
         :store="store"
         :style="{
-          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : ''
+          width: layout.bodyWidth.value ? layout.bodyWidth.value + 'px' : '',
         }"
         :sum-text="sumText || t('el.table.sumText')"
         :summary-method="summaryMethod"
@@ -88,19 +101,25 @@
       v-if="store.states.fixedColumns.value.length > 0"
       ref="fixedWrapper"
       v-mousewheel="handleFixedMousewheel"
-      :style="[{
-                 width: layout.fixedWidth.value ? layout.fixedWidth.value + 'px' : ''
-               },
-               fixedHeight]"
+      :style="[
+        {
+          width: layout.fixedWidth.value ? layout.fixedWidth.value + 'px' : '',
+        },
+        fixedHeight,
+      ]"
       class="el-table__fixed"
     >
-      <div v-if="showHeader" ref="fixedHeaderWrapper" class="el-table__fixed-header-wrapper">
+      <div
+        v-if="showHeader"
+        ref="fixedHeaderWrapper"
+        class="el-table__fixed-header-wrapper"
+      >
         <table-header
           ref="fixedTableHeader"
           :border="border"
           :store="store"
           :style="{
-            width: bodyWidth
+            width: bodyWidth,
           }"
           fixed="left"
           @set-drag-visible="setDragVisible"
@@ -108,10 +127,12 @@
       </div>
       <div
         ref="fixedBodyWrapper"
-        :style="[{
-                   top: layout.headerHeight.value + 'px'
-                 },
-                 fixedBodyHeight]"
+        :style="[
+          {
+            top: layout.headerHeight.value + 'px',
+          },
+          fixedBodyHeight,
+        ]"
         class="el-table__fixed-body-wrapper"
       >
         <table-body
@@ -121,11 +142,15 @@
           :store="store"
           :stripe="stripe"
           :style="{
-            width: bodyWidth
+            width: bodyWidth,
           }"
           fixed="left"
         />
-        <div v-if="$slots.append" :style="{ height: layout.appendHeight.value + 'px'}" class="el-table__append-gutter"></div>
+        <div
+          v-if="$slots.append"
+          :style="{ height: layout.appendHeight.value + 'px' }"
+          class="el-table__append-gutter"
+        ></div>
       </div>
       <div
         v-if="showSummary"
@@ -137,7 +162,7 @@
           :border="border"
           :store="store"
           :style="{
-            width: bodyWidth
+            width: bodyWidth,
           }"
           :sum-text="sumText || t('el.table.sumText')"
           :summary-method="summaryMethod"
@@ -149,20 +174,30 @@
       v-if="store.states.rightFixedColumns.value.length > 0"
       ref="rightFixedWrapper"
       v-mousewheel="handleFixedMousewheel"
-      :style="[{
-                 width: layout.rightFixedWidth.value ? layout.rightFixedWidth.value + 'px' : '',
-                 right: layout.scrollY.value ? (border ? layout.gutterWidth : (layout.gutterWidth || 0)) + 'px' : ''
-               },
-               fixedHeight]"
+      :style="[
+        {
+          width: layout.rightFixedWidth.value
+            ? layout.rightFixedWidth.value + 'px'
+            : '',
+          right: layout.scrollY.value
+            ? (border ? layout.gutterWidth : layout.gutterWidth || 0) + 'px'
+            : '',
+        },
+        fixedHeight,
+      ]"
       class="el-table__fixed-right"
     >
-      <div v-if="showHeader" ref="rightFixedHeaderWrapper" class="el-table__fixed-header-wrapper">
+      <div
+        v-if="showHeader"
+        ref="rightFixedHeaderWrapper"
+        class="el-table__fixed-header-wrapper"
+      >
         <table-header
           ref="rightFixedTableHeader"
           :border="border"
           :store="store"
           :style="{
-            width: bodyWidth
+            width: bodyWidth,
           }"
           fixed="right"
           @set-drag-visible="setDragVisible"
@@ -170,10 +205,7 @@
       </div>
       <div
         ref="rightFixedBodyWrapper"
-        :style="[
-          {top: layout.headerHeight.value + 'px'},
-          fixedBodyHeight
-        ]"
+        :style="[{ top: layout.headerHeight.value + 'px' }, fixedBodyHeight]"
         class="el-table__fixed-body-wrapper"
       >
         <table-body
@@ -183,11 +215,15 @@
           :store="store"
           :stripe="stripe"
           :style="{
-            width: bodyWidth
+            width: bodyWidth,
           }"
           fixed="right"
         />
-        <div v-if="$slots.append" :style="{ height: layout.appendHeight.value + 'px' }" class="el-table__append-gutter"></div>
+        <div
+          v-if="$slots.append"
+          :style="{ height: layout.appendHeight.value + 'px' }"
+          class="el-table__append-gutter"
+        ></div>
       </div>
       <div
         v-if="showSummary"
@@ -199,7 +235,7 @@
           :border="border"
           :store="store"
           :style="{
-            width: bodyWidth
+            width: bodyWidth,
           }"
           :sum-text="sumText || t('el.table.sumText')"
           :summary-method="summaryMethod"
@@ -212,11 +248,15 @@
       ref="rightFixedPatch"
       :style="{
         width: layout.scrollY.value ? layout.gutterWidth + 'px' : '0',
-        height: layout.headerHeight.value + 'px'
+        height: layout.headerHeight.value + 'px',
       }"
       class="el-table__fixed-right-patch"
     ></div>
-    <div v-show="resizeProxyVisible" ref="resizeProxy" class="el-table__column-resize-proxy"></div>
+    <div
+      v-show="resizeProxyVisible"
+      ref="resizeProxy"
+      class="el-table__column-resize-proxy"
+    ></div>
   </div>
 </template>