解决使用el-cascader时选择了某个值后下拉框无法关闭的问题

背景

在使用 Element Plus 的级联选择器组件时，我们遇到了一个用户体验问题：当用户通过搜索关键词选中某个选项后，下拉框并不会自动关闭，用户需要手动点击外部区域才能关闭下拉框。此外，搜索关键词也不会自动清除，这可能会影响用户的下一次操作。

目标

1. 实现搜索关键词后，选中选项时自动关闭下拉框
2. 清除搜索关键词
3. 保持原有的多选功能正常工作

解决方案

我们通过以下步骤实现了这个功能：

1. 添加一个 isSearching 状态来跟踪是否正在进行搜索
2. 在 filterMethod 中更新 isSearching 状态
3. 在 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>

实现细节

1. isSearching 状态：

   • 我们引入了 isSearching ref 来跟踪是否正在进行搜索。

2. filterMethod 函数：

   • 当有关键词输入时，将 isSearching 设置为 true。
   • 当关键词为空时，将 isSearching 设置为 false。

3. handleChange 方法：

   • 当 isSearching 为 true 时，表示用户通过搜索选中了选项。
   • 在这种情况下，我们将 isSearching 重置为 false，并调用 cascaderCityRef.value.togglePopperVisible() 来关闭下拉框。

优点

1. 提升了用户体验，搜索选中后自动关闭下拉框。
2. 清除了搜索关键词，为下一次操作做好准备。
3. 不影响级联选择器的多选功能。

注意事项

1. 确保 cascaderCityRef 正确引用了级联选择器组件。
2. 这个解决方案依赖于 Element Plus 的内部方法 togglePopperVisible()，如果未来版本更改了这个方法，可能需要相应调整。

结论

通过这个优化，我们显著改善了级联选择器的用户体验，特别是在搜索和选择场景中。这个解决方案既简单又有效，可以很容易地集成到现有的 Element Plus 级联选择器实现中。