Quasar Select筛选无结果时after-options插槽按钮消失的解决方法

方法一：替换为bottom插槽 #

after-options插槽的渲染依赖选项列表的存在，当筛选后无结果时选项列表不渲染，该插槽也会被隐藏。而bottom插槽是Q-Select下拉面板的底部固定插槽，无论是否有选项都会稳定显示。

只需将原代码中的after-options插槽替换为bottom插槽即可：

<q-select
  <!-- 原有属性保持不变 -->
>
  <!-- 其他插槽内容保持不变 -->

  <template v-slot:bottom>
    <q-btn
      :label="'Something'"
      color="primary"
      icon="add"
      type="a"
      dense
      unelevated
      flat
      no-caps
      class="text-neutral-primary-dark q-ml-sm q-mb-sm q-mt-sm"
      @click="doSomething"
    >
      <q-tooltip
        :delay="300"
        anchor="bottom middle"
        self="top middle"
        transition-show="fade"
        transition-hide="fade"
      >
        "Some Text"
      </q-tooltip>
    </q-btn>
  </template>
</q-select>

方法二：添加空占位选项（保留after-options插槽） #

如果必须使用after-options插槽，可以在筛选无结果时给filteredItems添加一个隐藏的空占位项，确保选项区域始终存在：

1. 修改筛选逻辑 #

在filterItems方法中，当筛选结果为空时，插入一个空对象作为占位：

function filterItems(val, update) {
  // 原筛选逻辑处理
  let filtered = /* 你的筛选代码 */;
  
  update(() => {
    // 无结果时添加空占位项
    filteredItems.value = filtered.length === 0 ? [{}] : filtered;
  });
}

2. 隐藏空占位选项 #

在option插槽中，判断选项是否有效，仅渲染有内容的选项：

<template v-slot:option="scope">
  <!-- 仅当选项有label时才渲染 -->
  <q-item
    v-if="scope.opt.label"
    :data-test-id="getOptionId(scope)"
    v-bind="scope.itemProps"
    v-on="scope.itemEvents"
  >
    <q-item-section>
      <q-item-label v-html="scope.opt.label"/>
    </q-item-section>
  </q-item>
</template>

这样即使筛选无结果，选项区域会存在一个不可见的空项，after-options插槽的按钮就能正常显示。

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