Table: fix oversized filter list. Resolves #11314 (#11320)

Author: jikkai

packages/table/src/filter-panel.vue

@@ -6,12 +6,14 @@
       v-clickoutside="handleOutsideClick"
       v-show="showPopper">
       <div class="el-table-filter__content">
-        <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
-          <el-checkbox
-            v-for="filter in filters"
-            :key="filter.value"
-            :label="filter.value">{{ filter.text }}</el-checkbox>
-        </el-checkbox-group>
+        <el-scrollbar wrap-class="el-table-filter__wrap">
+          <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
+            <el-checkbox
+              v-for="filter in filters"
+              :key="filter.value"
+              :label="filter.value">{{ filter.text }}</el-checkbox>
+          </el-checkbox-group>
+        </el-scrollbar>
       </div>
       <div class="el-table-filter__bottom">
         <button @click="handleConfirm"

packages/theme-chalk/src/table-column.scss

@@ -76,11 +76,16 @@
     }
   }
 
+  @include e(wrap) {
+    max-height: 280px;
+  }
+
   @include e(checkbox-group) {
     padding: 10px;
 
     label.el-checkbox {
       display: block;
+      margin-right: 5px;
       margin-bottom: 8px;
       margin-left: 5px;
     }