Q-select with hierarchical option list?



  • 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.



  • @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)
    }
    


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


Log in to reply