Customize QSelect selected options display

Customize the way selected options are displayed in QSelect.

vuequasar

by

PDan

November 25, 2023

Problem description

You need to display selected options in a QSelect, but using a limited space.

Solution

You can customize the #selected-item slot to show as many selected options as you want, and using different formatting for them.

Demo.vue

<template>
  <div class="q-pa-md column q-gutter-y-md" style="max-width: 500px">
    <q-select
      v-model="model"
      :options="options"
      label="Select up to 3, 4-6 or more than 6"
      filled
      multiple
      color="deep-orange-6"
    >
      <template v-slot:selected-item="scope">
        <template v-if="model.length <= 6">
          <q-chip
            v-if="scope.index < 3"
            style="margin-bottom: -2px"
            dense
            square
            color="grey-4"
            text-color="dark"
            removable
            :tabindex="scope.tabindex"
            @remove="scope.removeAtIndex(scope.index)"
          >
            <q-avatar color="grey-8" text-color="grey-1" font-size="14px">{{ scope.index + 1 }}</q-avatar>
            {{ scope.opt.label }}
          </q-chip>

          <span v-else-if="scope.index === 3" class="q-ml-sm q-pt-xs">
            ... {{ model.length - 2 }} more
          </span>
        </template>

        <span v-else-if="scope.index === 0" class="q-pt-xs">
          {{ model.length }} out of {{ options.length }} selected
        </span>
      </template>
    </q-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const model = ref(null);
const options = Array(10)
  .fill(null)
  .map((_, i) => ({ label: `Options ${i + 1}`, value: i + 1 }));
</script>

Demo