Select with a Tree

  • I am trying to implement a functionality like what you see here.

    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 ?

    1. I can not reference q-tree  in  q-popup-proxy and I can not use the q-tree functions such as getTickedNodes
    2. 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

        <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" />
                <!-- :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 }}
                    <template v-if="!multi_select && selected_node">
                        <q-chip color="primary" text-color="white" dense :key="key">
                            {{ selected_node[tree_label_key] }}
                <q-popup-proxy :breakpoint="600" style="width: 380px;" ref="popup">
                    <!-- :expanded.sync="expanded" -->

  • 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 : )

Log in to reply