Select with a Tree



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

    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.
      tree_select.png

    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>
    


  • 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


Log in to reply