mirror of https://github.com/ElemeFE/element
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/pull/4626/head
parent
14f4106460
commit
324f541c76
|
@ -1305,7 +1305,8 @@ Filter the table to find desired data.
|
||||||
label="Tag"
|
label="Tag"
|
||||||
width="100"
|
width="100"
|
||||||
:filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
|
:filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
|
||||||
:filter-method="filterTag">
|
:filter-method="filterTag"
|
||||||
|
filter-placement="bottom-start">
|
||||||
<template scope="scope">
|
<template scope="scope">
|
||||||
<el-tag
|
<el-tag
|
||||||
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
|
:type="scope.row.tag === 'Home' ? 'primary' : 'success'"
|
||||||
|
|
|
@ -1371,7 +1371,8 @@
|
||||||
label="标签"
|
label="标签"
|
||||||
width="100"
|
width="100"
|
||||||
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
|
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
|
||||||
:filter-method="filterTag">
|
:filter-method="filterTag"
|
||||||
|
filter-placement="bottom-start">
|
||||||
<template scope="scope">
|
<template scope="scope">
|
||||||
<el-tag
|
<el-tag
|
||||||
:type="scope.row.tag === '家' ? 'primary' : 'success'"
|
:type="scope.row.tag === '家' ? 'primary' : 'success'"
|
||||||
|
|
|
@ -146,6 +146,7 @@ export default {
|
||||||
filterMethod: Function,
|
filterMethod: Function,
|
||||||
filteredValue: Array,
|
filteredValue: Array,
|
||||||
filters: Array,
|
filters: Array,
|
||||||
|
filterPlacement: String,
|
||||||
filterMultiple: {
|
filterMultiple: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
@ -238,7 +239,8 @@ export default {
|
||||||
filterable: this.filters || this.filterMethod,
|
filterable: this.filters || this.filterMethod,
|
||||||
filterMultiple: this.filterMultiple,
|
filterMultiple: this.filterMultiple,
|
||||||
filterOpened: false,
|
filterOpened: false,
|
||||||
filteredValue: this.filteredValue || []
|
filteredValue: this.filteredValue || [],
|
||||||
|
filterPlacement: this.filterPlacement || ''
|
||||||
});
|
});
|
||||||
|
|
||||||
objectAssign(column, forced[type] || {});
|
objectAssign(column, forced[type] || {});
|
||||||
|
|
|
@ -255,7 +255,9 @@ export default {
|
||||||
if (!filterPanel) {
|
if (!filterPanel) {
|
||||||
filterPanel = new Vue(FilterPanel);
|
filterPanel = new Vue(FilterPanel);
|
||||||
this.filterPanels[column.id] = filterPanel;
|
this.filterPanels[column.id] = filterPanel;
|
||||||
|
if (column.filterPlacement) {
|
||||||
|
filterPanel.placement = column.filterPlacement;
|
||||||
|
}
|
||||||
filterPanel.table = table;
|
filterPanel.table = table;
|
||||||
filterPanel.cell = cell;
|
filterPanel.cell = cell;
|
||||||
filterPanel.column = column;
|
filterPanel.column = column;
|
||||||
|
|
Loading…
Reference in New Issue