Browse Source

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/

white.wang 8 years ago
parent
commit
324f541c76

+ 2 - 1
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'"

+ 2 - 1
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'"

+ 3 - 1
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] || {});

+ 3 - 1
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;