我目前正在 Vue 组件上使用
q-select
。q-select
内放置一个持久按钮,但选择本身有一个过滤器,并且该过滤器内部有选项。因此,当我过滤并且没有结果时,具有我需要使用的功能的按钮总是消失。
预览
<q-select
ref="selectEntityRef"
v-model="_value"
:options="filteredItems"
:label="_label || $t(entity?.defaultLabel) || ''"
:multiple="_multiple"
:debounce="_debounce"
:disable="_disable"
:readonly="_readonly"
:rules="_rules"
:dense="_dense || _ultraDense"
:lazy-rules="_lazyRules"
:hide-bottom-space="_hideBottomSpace"
:loading="isLoading"
:aria-placeholder="placeholder"
:emit-value="!_returnObject"
:clearable="_clearable"
option-label="label"
option-value="value"
input-debounce="750"
use-input
outlined
class="col col-grow small-icon text-ellipsis"
@filter="filterItems"
@focus="focused = true"
@blur="blur"
@input="emitObject"
>
<template v-slot:selected>
<span
class="text-neutral-primary-dark"
v-html="placeholder"
/>
</template>
<template v-slot:option="scope">
<q-item
: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>
<template
v-slot:after-options
>
<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>
即使没有选择,我也需要它坚持下去。我怎么能做到这一点?
此问题之前已报告过(带有
before-options
槽,但问题/原理相同):https://github.com/quasarframework/quasar/issues/8755
要么使用单独的
no-option
插槽,要么使用注释中的逻辑强制打开菜单(不过不喜欢最后一个)