<template>
|
<transition name="el-zoom-in-top">
|
<div
|
class="el-table-filter"
|
v-if="multiple"
|
v-clickoutside="handleOutsideClick"
|
v-show="showPopper">
|
<div class="el-table-filter__content">
|
<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"
|
:class="{ 'is-disabled': filteredValue.length === 0 }"
|
:disabled="filteredValue.length === 0">{{ t('el.table.confirmFilter') }}</button>
|
<button @click="handleReset">{{ t('el.table.resetFilter') }}</button>
|
</div>
|
</div>
|
<div
|
class="el-table-filter"
|
v-else
|
v-clickoutside="handleOutsideClick"
|
v-show="showPopper">
|
<ul class="el-table-filter__list">
|
<li class="el-table-filter__list-item"
|
:class="{ 'is-active': filterValue === undefined || filterValue === null }"
|
@click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
|
<li class="el-table-filter__list-item"
|
v-for="filter in filters"
|
:label="filter.value"
|
:key="filter.value"
|
:class="{ 'is-active': isActive(filter) }"
|
@click="handleSelect(filter.value)" >{{ filter.text }}</li>
|
</ul>
|
</div>
|
</transition>
|
</template>
|
|
<script type="text/babel">
|
import Popper from 'element-ui/src/utils/vue-popper';
|
import { PopupManager } from 'element-ui/src/utils/popup';
|
import Locale from 'element-ui/src/mixins/locale';
|
import Clickoutside from 'element-ui/src/utils/clickoutside';
|
import Dropdown from './dropdown';
|
import ElCheckbox from 'element-ui/packages/checkbox';
|
import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
|
import ElScrollbar from 'element-ui/packages/scrollbar';
|
|
export default {
|
name: 'ElTableFilterPanel',
|
|
mixins: [Popper, Locale],
|
|
directives: {
|
Clickoutside
|
},
|
|
components: {
|
ElCheckbox,
|
ElCheckboxGroup,
|
ElScrollbar
|
},
|
|
props: {
|
placement: {
|
type: String,
|
default: 'bottom-end'
|
}
|
},
|
|
methods: {
|
isActive(filter) {
|
return filter.value === this.filterValue;
|
},
|
|
handleOutsideClick() {
|
setTimeout(() => {
|
this.showPopper = false;
|
}, 16);
|
},
|
|
handleConfirm() {
|
this.confirmFilter(this.filteredValue);
|
this.handleOutsideClick();
|
},
|
|
handleReset() {
|
this.filteredValue = [];
|
this.confirmFilter(this.filteredValue);
|
this.handleOutsideClick();
|
},
|
|
handleSelect(filterValue) {
|
this.filterValue = filterValue;
|
|
if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {
|
this.confirmFilter(this.filteredValue);
|
} else {
|
this.confirmFilter([]);
|
}
|
|
this.handleOutsideClick();
|
},
|
|
confirmFilter(filteredValue) {
|
this.table.store.commit('filterChange', {
|
column: this.column,
|
values: filteredValue
|
});
|
this.table.store.updateAllSelected();
|
}
|
},
|
|
data() {
|
return {
|
table: null,
|
cell: null,
|
column: null
|
};
|
},
|
|
computed: {
|
filters() {
|
return this.column && this.column.filters;
|
},
|
|
filterValue: {
|
get() {
|
return (this.column.filteredValue || [])[0];
|
},
|
set(value) {
|
if (this.filteredValue) {
|
if ((typeof value !== 'undefined') && (value !== null)) {
|
this.filteredValue.splice(0, 1, value);
|
} else {
|
this.filteredValue.splice(0, 1);
|
}
|
}
|
}
|
},
|
|
filteredValue: {
|
get() {
|
if (this.column) {
|
return this.column.filteredValue || [];
|
}
|
return [];
|
},
|
set(value) {
|
if (this.column) {
|
this.column.filteredValue = value;
|
}
|
}
|
},
|
|
multiple() {
|
if (this.column) {
|
return this.column.filterMultiple;
|
}
|
return true;
|
}
|
},
|
|
mounted() {
|
this.popperElm = this.$el;
|
this.referenceElm = this.cell;
|
this.table.bodyWrapper.addEventListener('scroll', () => {
|
this.updatePopper();
|
});
|
|
this.$watch('showPopper', (value) => {
|
if (this.column) this.column.filterOpened = value;
|
if (value) {
|
Dropdown.open(this);
|
} else {
|
Dropdown.close(this);
|
}
|
});
|
},
|
watch: {
|
showPopper(val) {
|
if (val === true && parseInt(this.popperJS._popper.style.zIndex, 10) < PopupManager.zIndex) {
|
this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
|
}
|
}
|
}
|
};
|
</script>
|
