From 324f541c765c5ccb81db082d64d9e11e55f07841 Mon Sep 17 00:00:00 2001
From: "white.wang" <white.wang@vipshop.com>
Date: Thu, 27 Apr 2017 14:08:59 +0800
Subject: [PATCH] Table: Add filter-placement for table filter Popper; If the
 column is too wide, the popper's position will be improper;
 https://jsfiddle.net/whitewang/obpsLcva/7/

---
 examples/docs/en-US/table.md       | 3 ++-
 examples/docs/zh-CN/table.md       | 3 ++-
 packages/table/src/table-column.js | 4 +++-
 packages/table/src/table-header.js | 4 +++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
index 0377170a0..c17080fb3 100644
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -1305,7 +1305,8 @@ Filter the table to find desired data.
       label="Tag"
       width="100"
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
-      :filter-method="filterTag">
+      :filter-method="filterTag"
+      filter-placement="bottom-start">
       <template scope="scope">
         <el-tag
           :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
index 319b8899b..a16bdbfcd 100644
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@@ -1371,7 +1371,8 @@
       label="标签"
       width="100"
       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
-      :filter-method="filterTag">
+      :filter-method="filterTag"
+      filter-placement="bottom-start">
       <template scope="scope">
         <el-tag
           :type="scope.row.tag === '家' ? 'primary' : 'success'"
diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
index 8bdb09459..cc7891ac1 100644
--- a/packages/table/src/table-column.js
+++ b/packages/table/src/table-column.js
@@ -146,6 +146,7 @@ export default {
     filterMethod: Function,
     filteredValue: Array,
     filters: Array,
+    filterPlacement: String,
     filterMultiple: {
       type: Boolean,
       default: true
@@ -238,7 +239,8 @@ export default {
       filterable: this.filters || this.filterMethod,
       filterMultiple: this.filterMultiple,
       filterOpened: false,
-      filteredValue: this.filteredValue || []
+      filteredValue: this.filteredValue || [],
+      filterPlacement: this.filterPlacement || ''
     });
 
     objectAssign(column, forced[type] || {});
diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
index 1aac17a4d..dcf1750c3 100644
--- a/packages/table/src/table-header.js
+++ b/packages/table/src/table-header.js
@@ -255,7 +255,9 @@ export default {
       if (!filterPanel) {
         filterPanel = new Vue(FilterPanel);
         this.filterPanels[column.id] = filterPanel;
-
+        if (column.filterPlacement) {
+            filterPanel.placement = column.filterPlacement;
+        }
         filterPanel.table = table;
         filterPanel.cell = cell;
         filterPanel.column = column;