filter-panel是专门针对筛选器写的一个组件，最外面是一个el-zoom-in-top的transition，然后内部根据是否可以多选分为两个部分，多选部分用 checkbox 来实现，单选部分直接用 list 来实现。
<transition name="el-zoom-in-top">
<div class="el-table-filter" v-if="multiple" v-show="showPopper">
...
</div>
<div class="el-table-filter" v-else v-show="showPopper">
...
</div>
</transition>
其中 multiple 是根据列的 filterMultiple 来设置的。
因为要实现 popper 的效果，因此 mixin 中加入了 Popper 这一 mixin，其初始化在 mounted 这一生命周期中：
mounted() {
// 自身挂载元素作为 popper
this.popperElm = this.$el;
// 对应的表头的单元格作为 reference
this.referenceElm = this.cell;
// 表主题滚动的时候，重新计算 popper
this.table.bodyWrapper.addEventListener('scroll', () => {
this.updatePopper();
});
// 处理 popper 的开关
this.$watch('showPopper', (value) => {
if (this.column) this.column.filterOpened = value;
if (value) {
Dropdown.open(this);
} else {
Dropdown.close(this);
}
});
}
其中 Dropdown 是抽象出来为了处理开关 popper 的。
import Vue from 'vue';
// 存储打开的 dropdown
var dropdowns = [];
/**
* 处理点击事件，如果不是点击在 dropdown 就关闭
* @param event 点击事件
* @return
*/
!Vue.prototype.$isServer && document.addEventListener('click', function(event) {
// 对每一个打开的 dropdown 进行判断
dropdowns.forEach(function(dropdown) {
// 触发事件的元素
var target = event.target;
// 如果不存在对应的 dropdown，或者没有挂载元素，直接返回
if (!dropdown || !dropdown.$el) return;
// 如果点击在 dropdown，或者它的内部也直接返回
if (target === dropdown.$el || dropdown.$el.contains(target)) {
return;
}
// 其他情况就调用相应的 handleOutsideClick 函数
dropdown.handleOutsideClick && dropdown.handleOutsideClick(event);
});
});
export default {
// 打开，push 进数组
open(instance) {
if (instance) {
dropdowns.push(instance);
}
},
// 关闭，从数组中移出
close(instance) {
var index = dropdowns.indexOf(instance);
if (index !== -1) {
dropdowns.splice(instance, 1);
}
}
};
多选
多选部分的实现，就是一个 checkbox-group，实现较为简单，重点讲解一下，各种数据是如何获得的。
<div class="el-table-filter" v-if="multiple" 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"
:label="filter.value">{{ filter.text }}</el-checkbox>
</el-checkbox-group>
</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>
筛选条件
首先是 filteredValue ，这是一个计算元素，用来表示筛选条件，包含 get和set，都是操纵的对应列的对应数据。
computed: {
filteredValue: {
get() {
if (this.column) {
return this.column.filteredValue || [];
}
return [];
},
set(value) {
if (this.column) {
this.column.filteredValue = value;
}
}
},
}
而 filters 也是对应列上的一个属性，是对应的筛选器的相关信息。
computed: {
filters() {
return this.column && this.column.filters;
},
}
操作按钮
操作的两个按钮的设置也很简单，内部数据用了 i18n 来实现多语言，首先分析一下确认按钮。
<button
@click="handleConfirm"
:class="{ 'is-disabled': filteredValue.length === 0 }"
:disabled="filteredValue.length === 0">
{{ t('el.table.confirmFilter') }}
</button>
首先是监听 click 事件，并绑定 handleConfirm 函数。
methods: {
handleConfirm() {
// 根据选择的筛选条件来筛选
this.confirmFilter(this.filteredValue);
// 隐藏
this.handleOutsideClick();
},
// 直接改变 showPopper，然后 watch 会处理关闭这个 popper
handleOutsideClick() {
this.showPopper = false;
},
// 根据筛选条件来筛选
confirmFilter(filteredValue) {
this.table.store.commit('filterChange', {
column: this.column,
values: filteredValue
});
}
}
然后是重置按钮，只是简单的监听 click 事件，来触发 handleReset。
<button @click="handleReset">{{ t('el.table.resetFilter') }}</button>
methods: {
handleReset() {
// 清空筛选条件
this.filteredValue = [];
// 重新获取筛选数据
this.confirmFilter(this.filteredValue);
// 关闭
this.handleOutsideClick();
},
}
单选
单选是通过 li 来实现。
<div class="el-table-filter" v-else v-show="showPopper">
<ul class="el-table-filter__list">
<!-- 没有选择任何一个筛选条件 -->
<li class="el-table-filter__list-item"
:class="{ 'is-active': !filterValue }"
@click="handleSelect(null)">{{ t('el.table.clearFilter') }}</li>
<!-- 列表渲染每个筛选条件 -->
<li class="el-table-filter__list-item"
v-for="filter in filters"
:label="filter.value"
:class="{ 'is-active': isActive(filter) }"
@click="handleSelect(filter.value)" >{{ filter.text }}</li>
</ul>
</div>
其中 handleSelect 是用来处理选择了哪个筛选条件的，它复用了多选的相关操作，通过 filterValue 这一计算属性来影响 filterdValue。
computed: {
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);
}
}
}
},
},
methods: {
// 参数是筛选条件
handleSelect(filterValue) {
this.filterValue = filterValue;
if ((typeof filterValue !== 'undefined') && (filterValue !== null)) {
this.confirmFilter(this.filteredValue);
} else {
this.confirmFilter([]);
}
this.handleOutsideClick();
},
// 判断是否是所选的筛选条件
isActive(filter) {
return filter.value === this.filterValue;
},
}
