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.