Q-select with hierarchical option list?

CWoodman

I need a ‘combo-box’ with a tree-structured drop-down list. Is there any way to do this with q-select? I’ve built one using q-input and q-tree that works fine, but I also need autofill which is no longer supported on q-input.

PSTA

@CWoodman
Hi,
you can use v-slot. Here is simple example:

<q-select
  v-model="selectedItem"
  :options="optionsList"
  clearable
  outlined
  options-selected-class="primary"
>
  <template v-slot:option="scope">
    <q-expansion-item
      expand-separator
      group="section"
      :default-opened="hasChild(scope)"
      header-class="text-weight-bold"
      :label="scope.opt.label"
    >
      <template v-for="child in scope.opt.children">
        <q-item
          :key="child.value"
          clickable
          v-ripple
          v-close-popup
          @click="selectedItem = child"
        >
          <q-item-section>
            <q-item-label v-html="child.label"></q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </q-expansion-item>
  </template>
</q-select>

And hasChild method:

hasChild (scope) {
  return scope.opt.children.some(c => c.value === this.selectedItem)
}

CWoodman

@PSTA Perfect! Thanks. Quasar is great - I really appreciate all the work you do.