解决使用el-cascader时选择了某个值后下拉框无法关闭的问题
背景
在使用 Element Plus 的级联选择器组件时,我们遇到了一个用户体验问题:当用户通过搜索关键词选中某个选项后,下拉框并不会自动关闭,用户需要手动点击外部区域才能关闭下拉框。此外,搜索关键词也不会自动清除,这可能会影响用户的下一次操作。
目标
- 实现搜索关键词后,选中选项时自动关闭下拉框
- 清除搜索关键词
- 保持原有的多选功能正常工作
解决方案
我们通过以下步骤实现了这个功能:
- 添加一个
isSearching
状态来跟踪是否正在进行搜索 - 在
filterMethod
中更新isSearching
状态 - 在
handleChange
方法中根据isSearching
状态来控制下拉框的关闭
代码实现
<template>
<div style="width: 100%">
<el-cascader
:style="{ width: '100%' }"
v-model="selectedOptions"
:options="extractedOptions"
:props="{ value: 'direId', label: 'directName', children: 'children', multiple: true, emitPath}"
filterable
multiple
collapse-tags
max-collapse-tags="5"
filter-select-all
:show-all-levels="false"
clearable
:placeholder="placeholder"
:filter-method="filterMethod"
@change="handleChange"
ref="cascaderCityRef"
/>
</div>
</template>
<script setup>
import { ref, watch, defineProps, defineEmits, computed } from 'vue'
import { extractChildrenByLevel } from '@/utils/index'
// ... 其他代码 ...
// 是否输入搜索关键词
const isSearching = ref(false)
const handleChange = (value) => {
console.log("Selected value:", value);
console.log(
"Selected label:",
cascaderCityRef.value.getCheckedNodes().map((i) => i.data)
);
// 搜索选中值之后,切换 popper 可见状态
if (isSearching.value) {
isSearching.value = false;
cascaderCityRef.value.togglePopperVisible(); // 监听值发生变化就关闭它
}
emit(
"change",
value,
cascaderCityRef.value.getCheckedNodes().map((i) => i.data)
);
};
const filterMethod = (node, keyword) => {
if (keyword) {
isSearching.value = true
} else {
isSearching.value = false
}
return node.label.includes(keyword);
}
// ... 其他代码 ...
</script>
实现细节
-
isSearching 状态:
- 我们引入了
isSearching
ref 来跟踪是否正在进行搜索。
- 我们引入了
-
filterMethod 函数:
- 当有关键词输入时,将
isSearching
设置为true
。 - 当关键词为空时,将
isSearching
设置为false
。
- 当有关键词输入时,将
-
handleChange 方法:
- 当
isSearching
为true
时,表示用户通过搜索选中了选项。 - 在这种情况下,我们将
isSearching
重置为false
,并调用cascaderCityRef.value.togglePopperVisible()
来关闭下拉框。
- 当
优点
- 提升了用户体验,搜索选中后自动关闭下拉框。
- 清除了搜索关键词,为下一次操作做好准备。
- 不影响级联选择器的多选功能。
注意事项
- 确保
cascaderCityRef
正确引用了级联选择器组件。 - 这个解决方案依赖于 Element Plus 的内部方法
togglePopperVisible()
,如果未来版本更改了这个方法,可能需要相应调整。
结论
通过这个优化,我们显著改善了级联选择器的用户体验,特别是在搜索和选择场景中。这个解决方案既简单又有效,可以很容易地集成到现有的 Element Plus 级联选择器实现中。
网友评论