Vue3-Cascader级联选择器-多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词

一、问题描述

在el-select在多选且可搜索时，选中选项后，当前的搜索关键词是否保留可以通过reserve-keyword属性来控制；

难受😣的是element的级联选择器在多选可搜索，用户输入两次的情况下，便不会自动消除该值👇：

element-plus更直接，搜索关键词会被直接保留👇：

级联选择器没有reserve-keyword属性，需求是必须得把它消除掉🤔

二、思路

（1）操作Dom：元素审查可以看到搜索关键词用了一个input元素，且值就是输入的字母g；

（2）模拟级联（el-select+jel-cascader-pane级联面板）

三、解决

在el-cascader的change事件中，把搜索关键词移除；

<template>
  <el-cascader
    style="width: 100%"
    :model-value="value"
    :props="cascaderProps"
    :options="cascaderOptions"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
    :max-collapse-tags="maxCollapseTags"
    :placeholder="placeholder"
    clearable
    @change="onChange"
    :disabled="disabled"
    :filterable="filterable"
  />
</template>

为了兼容一个页面存在多个多选级联且需求不同的情况，建议给父组件加上特定类名；

const onChange = (val) => {
  // 多选模式下 用级联 要求是搜索的内容在change事件触发后要清除 这里暂时通过清空DOM值实现
  // 有同样的多选需求，为了区分多选&页面存在多个级联框的情况下，给外层添加class="department_cascader" 
  nextTick(() => {
    const inputElement = document.querySelector('.department_cascader input.el-cascader__search-input');
    inputElement.value = '';
  });
  // 其他操作
  emits('change', val);
};

暂时没有发现什么问题，但是最好尽量避免直接操作dom，有同样需求，欢迎分享更好的解决办法，感谢🙏～