解決使用el-cascader時(shí)選擇了某個(gè)值后下拉框無法關(guān)閉的問題

背景

在使用 Element Plus 的級聯(lián)選擇器組件時(shí)，我們遇到了一個(gè)用戶體驗(yàn)問題：當(dāng)用戶通過搜索關(guān)鍵詞選中某個(gè)選項(xiàng)后姐扮，下拉框并不會自動關(guān)閉币叹，用戶需要手動點(diǎn)擊外部區(qū)域才能關(guān)閉下拉框赏壹。此外百拓，搜索關(guān)鍵詞也不會自動清除，這可能會影響用戶的下一次操作忍饰。

目標(biāo)

1. 實(shí)現(xiàn)搜索關(guān)鍵詞后贪嫂，選中選項(xiàng)時(shí)自動關(guān)閉下拉框
2. 清除搜索關(guān)鍵詞
3. 保持原有的多選功能正常工作

解決方案

我們通過以下步驟實(shí)現(xiàn)了這個(gè)功能：

1. 添加一個(gè) isSearching 狀態(tài)來跟蹤是否正在進(jìn)行搜索
2. 在 filterMethod 中更新 isSearching 狀態(tài)
3. 在 handleChange 方法中根據(jù) isSearching 狀態(tài)來控制下拉框的關(guān)閉

代碼實(shí)現(xiàn)

<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'

// ... 其他代碼 ...

// 是否輸入搜索關(guān)鍵詞
const isSearching = ref(false)

const handleChange = (value) => {
  console.log("Selected value:", value);
  console.log(
    "Selected label:",
    cascaderCityRef.value.getCheckedNodes().map((i) => i.data)
  );
  // 搜索選中值之后，切換 popper 可見狀態(tài)
  if (isSearching.value) {
    isSearching.value = false;
    cascaderCityRef.value.togglePopperVisible(); // 監(jiān)聽值發(fā)生變化就關(guān)閉它
  }
  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>

實(shí)現(xiàn)細(xì)節(jié)

1. isSearching 狀態(tài)：

   • 我們引入了 isSearching ref 來跟蹤是否正在進(jìn)行搜索艾蓝。

2. filterMethod 函數(shù)：

   • 當(dāng)有關(guān)鍵詞輸入時(shí)，將 isSearching 設(shè)置為 true斗塘。
   • 當(dāng)關(guān)鍵詞為空時(shí)赢织，將 isSearching 設(shè)置為 false。

3. handleChange 方法：

   • 當(dāng) isSearching 為 true 時(shí)馍盟，表示用戶通過搜索選中了選項(xiàng)于置。
   • 在這種情況下，我們將 isSearching 重置為 false贞岭，并調(diào)用 cascaderCityRef.value.togglePopperVisible() 來關(guān)閉下拉框八毯。

優(yōu)點(diǎn)

1. 提升了用戶體驗(yàn)，搜索選中后自動關(guān)閉下拉框瞄桨。
2. 清除了搜索關(guān)鍵詞话速，為下一次操作做好準(zhǔn)備。
3. 不影響級聯(lián)選擇器的多選功能芯侥。

注意事項(xiàng)

1. 確保 cascaderCityRef 正確引用了級聯(lián)選擇器組件泊交。
2. 這個(gè)解決方案依賴于 Element Plus 的內(nèi)部方法 togglePopperVisible()，如果未來版本更改了這個(gè)方法柱查，可能需要相應(yīng)調(diào)整廓俭。

結(jié)論

通過這個(gè)優(yōu)化，我們顯著改善了級聯(lián)選擇器的用戶體驗(yàn)唉工，特別是在搜索和選擇場景中研乒。這個(gè)解決方案既簡單又有效，可以很容易地集成到現(xiàn)有的 Element Plus 級聯(lián)選擇器實(shí)現(xiàn)中淋硝。