From df7bbe2ba4bcfa8c4cd866c58985548777eb9366 Mon Sep 17 00:00:00 2001
From: Jikkai Xiao <jikkai@users.noreply.github.com>
Date: Thu, 24 May 2018 11:57:42 +0800
Subject: [PATCH] Table: fix oversized filter list. Resolves #11314 (#11320)

---
 packages/table/src/filter-panel.vue        | 14 ++++++++------
 packages/theme-chalk/src/table-column.scss |  5 +++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue
index a30d453db..9ff7b4524 100644
--- a/packages/table/src/filter-panel.vue
+++ b/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"
diff --git a/packages/theme-chalk/src/table-column.scss b/packages/theme-chalk/src/table-column.scss
index 36da1aa08..6fd54e7a4 100644
--- a/packages/theme-chalk/src/table-column.scss
+++ b/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;
     }