美文网首页
el-cascader级联选择器优化:搜索后自动关闭下拉框

el-cascader级联选择器优化:搜索后自动关闭下拉框

作者: it之承影含光 | 来源:发表于2024-08-27 15:40 被阅读0次

    解决使用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 方法

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

    优点

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

    注意事项

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

    结论

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

    相关文章

      网友评论

          本文标题:el-cascader级联选择器优化:搜索后自动关闭下拉框

          本文链接:https://www.haomeiwen.com/subject/larzkjtx.html