Vue Multiselect组件clear插槽不生效 清除选中项按钮不显示问题求助

问题根因&修复方案 #

你遗漏了核心的功能开关配置，同时存在判断逻辑的兼容性问题，按以下步骤修改即可：

1. 首先给multiselect组件添加clearable属性，该属性是清除按钮显示的总开关，默认值为false，未开启时clear插槽不会被挂载到输入框的正确容器内，所以才会出现内容错位、高度为0的问题

   <multiselect
       v-model="items"
       :options="filteredList"
       :multiple="multiple"
       :close-on-select="multiple ? false : true"
       :show-labels="false"
       :placeholder="placeholder"
       track-by="id"
       :label="label"
       @input="inputChanged"
       :internal-search="false"
       @search-change="searchItems"
       :clearable="true" <!-- 新增这一行 -->
   >
   

2. 修改clear插槽的显示判断逻辑，当前的items.length只适用于多选模式，单选模式下items为null/对象，调用length会报错导致渲染异常：

   <template slot="clear" slot-scope="props">
       <div class="multiselect__clear" 
           v-if="items && (multiple ? items.length > 0 : true)" 
           @mousedown.prevent.stop="clearAll(props.search)"
       >
           ✕
       </div>
   </template>
   

3. 可选：如果要兼容组件默认样式，添加以下CSS修正按钮位置：

   <style scoped>
   /* Vue2深度选择器用/deep/，Vue3用:deep() */
   /deep/ .multiselect {
       position: relative;
   }
   .multiselect__clear {
       position: absolute;
       right: 10px;
       top: 50%;
       transform: translateY(-50%);
       cursor: pointer;
       color: #999;
       font-size: 16px;
   }
   </style>
   

内容的提问来源于stack exchange，提问作者narrei