Select with a Tree

turigeza

I am trying to implement a functionality like what you see here.
https://vue-treeselect.js.org/#flat-mode-and-sort-values

QTree would work just fine if it was in a drop down.

So I have tried using q-popup-proxy with q-tree and q-field.

I got two issues with this. Maybe solvable ?

I can not reference q-tree in q-popup-proxy and I can not use the q-tree functions such as getTickedNodes
I don’t know how to make the q-popup-proxy extend the full with of q-field so it looks like q-select
So I would like the q-popup-proxy extend to the red arrow on screenshot. q-field is not fixed width.

I have also considered using q-select to start with because it has all the functionality I need except that it can not do a tree. But there is no slot for options only for option maybe I should look at the source for q-tree and start with that ?

Any thoughts ? Thank you!

My Code for the popup proxy goes on the line of

<template>
    <div class="v_tree_select">

        <q-field :label="label" stack-label :hint="hint" :disable="disable">
            <template v-slot:append>
                <q-icon name="arrow_drop_down" />
            </template>
            <!-- :borderless="borderless"  -->
            <div class="v_tree_select_field_wrap" tabindex="0">

                <template v-if="multi_select && ticked_nodes.length > 0 ">
                    <q-chip color="primary" text-color="white" dense :key="key">
                        {{ selected }}
                    </q-chip>
                </template>

                <template v-if="!multi_select && selected_node">
                    <q-chip color="primary" text-color="white" dense :key="key">
                        {{ selected_node[tree_label_key] }}
                    </q-chip>
                </template>
            </div>
            <q-popup-proxy :breakpoint="600" style="width: 380px;" ref="popup">
                <q-tree
                    ref="tree"
                    :nodes="_tree"
                    :node-key="tree_key"
                    :label-key="tree_label_key"
                    :default-expand-all="default_expand_all"
                    :selected="selected"
                    :ticked="ticked"
                    @update:selected="node_selected"
                    @update:ticked="node_ticked"
                    class="q-ma-sm"
                    :key="key"
                >
                </q-tree>
                <!-- :expanded.sync="expanded" -->
            </q-popup-proxy>
        </q-field>

    </div>
</template>

turigeza

So number 2 is solved very easily : ) By adding fit to q-popup-proxy

<q-popup-proxy :breakpoint="600" fit ref="popup">

It is in the docs as well : )
https://quasar.dev/vue-components/popup-proxy#Pass-through-props

No More Posting New Topics!

Select with a Tree