功能概括
在表格表头字段实现下拉框的筛选功能,点击表头字段时,显示对应筛选的下拉框列表
<div
class="order-div-dable-head-item mouse_style"
v-if="!showScreen"
@click="clickHeader">
{{ title}}
<el-icon style="vertical-align: middle; margin-left: 5px">
<ArrowDown/>
</el-icon>
</div>
<div class="order-div-dable-head-item" v-else>
<el-select
v-model="selectValue"
style="width: 130px"
ref="Select"
@change="changeSelect"
@blur="blurSelect"
>
<el-option
v-for="item in newOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
这里我主要用到了下拉框的两个事件:change事件和blur事件
- change事件
监听到选择下拉框值时,直接触发对应的表格筛选接口方法
如果监听到选择了“全部”项,则直接隐藏该下拉框恢复为原来的表头字段“订单状态”
// select的Change事件
changeSelect(val) {
// 判断是否为空值,空值则为全部项
if (!val) {
// 是则直接隐藏select,显示表头字段
this.showScreen = false;
}
// 触发查询事件
this.getList()
},
- blur事件
当下拉框失去焦点时,判断是否为“全部”项,是则恢复表头字段。
// select的blur事件
blurSelect() {
// selectValue是与select组件双向绑定的值
if (!this.selectValue) {
// 如果该值为全部则隐藏该下拉框,显示表头字段
this.showScreen = false;
}
},
遇到的问题
当我在点击下拉框的选择项时,按道理是先触发change事件切换当前值后,再触发blur的失去焦点事件。
但完全不对。点击选择项后,只触发了blur失焦事件,change事件并没有触发。因为点击了选择项后直接就失去了焦点,与select组件绑定的值一直为空字符串。所以直接就隐藏了。并且按照事件的执行顺序:blur事件>change事件
所以blur事件方法优先生效,并判断不到改变的值,则修改了v-if的开关,讲下拉框的dom直接删除了,就不会在往下执行change事件。
解决方法
- 给blur事件添加一个定时器,则change事件先触发,再触发blur事件。完美解决。
// select的blur事件
blurSelect() {
setTimeout(() => {
if (!this.selectValue) {
this.showScreen = false;
}
}, 100);
},
但也可能不是很好的解决方法。如果大佬们有更好的方法,也欢迎大佬们一起分享探讨!
以上都是我个人见解,如有不对的地方,欢迎大佬们批评指正,互相学习。感谢观看!