选项槽在 Quasar Select 上消失后

问题描述 投票:0回答:1

我目前正在 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>

即使没有选择,我也需要它坚持下去。我怎么能做到这一点?

javascript vue.js quasar-framework
1个回答
0
投票

此问题之前已报告过(带有

before-options
槽,但问题/原理相同):https://github.com/quasarframework/quasar/issues/8755

要么使用单独的

no-option
插槽,要么使用注释中的逻辑强制打开菜单(不过不喜欢最后一个)

© www.soinside.com 2019 - 2024. All rights reserved.