Vue.js 3中如何将按钮添加到q-select下拉菜单内部？

你当前用的#append插槽是给q-select的输入框尾部追加元素的，这就是按钮显示在选择器外侧的原因。要把按钮放到下拉菜单内部，得用Quasar专为下拉菜单提供的插槽：

方案1：在选项列表底部加按钮（最简单） #

用#options-bottom插槽，无需重构原有选项列表，按钮会自动出现在默认选项的下方：

<q-select
  v-model="visibleColumns"
  multiple
  outlined
  dense
  options-dense
  :display-value="$q.lang.table.columns"
  emit-value
  map-options
  :options="columns"
  option-value="name"
  options-cover
  style="min-width: 150px"
>
  <template #options-bottom>
    <q-separator class="my-2" />
    <q-btn
      flat
      round
      dense
      icon="add"
      @click=""
      class="q-mx-auto q-py-2"
    />
  </template>
</q-select>

方案2：完全自定义下拉菜单内容 #

如果需要调整下拉菜单的整体布局，用#dropdown插槽，你可以自己编写选项列表和按钮的位置：

<q-select
  v-model="visibleColumns"
  multiple
  outlined
  dense
  options-dense
  :display-value="$q.lang.table.columns"
  emit-value
  map-options
  :options="columns"
  option-value="name"
  options-cover
  style="min-width: 150px"
>
  <!-- 自定义选项列表 -->
  <q-list>
    <q-item
      v-for="option in columns"
      :key="option.name"
      clickable
      v-model="visibleColumns"
      :value="option.name"
      tag="label"
    >
      <q-item-section>
        <q-checkbox v-model="visibleColumns" :val="option.name" />
      </q-item-section>
      <q-item-section>{{ option.label }}</q-item-section>
    </q-item>
  </q-list>

  <!-- 插入分隔线和按钮 -->
  <q-separator class="my-2" />
  <q-btn
    flat
    round
    dense
    icon="add"
    @click=""
    class="q-mx-auto"
  />
</q-select>

核心区别 #

• #append：作用于q-select的输入框区域，和下拉菜单无关
• #options-bottom：专为默认选项列表底部追加内容设计，无需改动原有选项
• #dropdown：完全接管下拉菜单内容，适合需要自定义布局的场景

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