[Not solved by Quasar, but manual coding]Auto expand for lazy QTree node

  • I am using lazy node for QTree. Everything is fine until I want to auto expand for lazy QTree node

    I try

      :expanded="['Node 1',  'Node 2']"

    where Node 1 and Node 2 is lazy node, and It does not expand.

    Hope anyone could help. Tks alot

  • I just dont want to reinvent the wheel, so hope QTree has some hidden API to do it (cant find in docs). If any dev around here could tell me yes or no, it ll be great.

    If answer is NO, I will try to write my own recursive lazy to load tree node

    Tks for any info

  • I come to my own solution like this

    Setting for tree

    <q-tree ref='tree'

    Declare treeData and treeChange for watching if there changing in loading tree node

    export default {
      data () {
        return {
          treeData : [],
          treeChange: 0,

    in mount, load array of tree need to be load (in order) and assign root node

      mounted: async function() {
        /* LOAD TREE ROOT NODE */
        this.firstLoadTree = true; //For checking if firstload of tree
        this.currentLoadNode = [150000,150138,150143,150299];  //List of node to be read, in order 
        let res = await axios({
            method: 'get',
            url: '/api/index.php?option=com_api&cat=core&controller=tree&task=getRoot',
        this.rootId = parseInt(res.data.rootId) //get RootId
        this.treeData = [{label:res.data.rootName, id: this.rootId, lazy: true }]; // First node assign
        this.treeChange++; //Inform changing in tree

    lazy function

       onLazyLoad ({ node, key, done, fail }) {
          let parent_id = node.id
              method: 'get',
              url: '/api/index.php?option=com_hoso&view=treeview&task=treeview&format=raw&id='+parent_id,
          .then(res => {
            // If no children tree return
            if(res.data == null){
            // Process to create tree
            let donvis = res.data;  //tree node data
            let treeNodes = [];  
            let path,icon,lazy;      
            for(let i = 0; i < donvis.length; i++){
              let id = parseInt(donvis[i].id);
              // Define Tree ARRAY for draw tree
              treeNodes [i] = {
                 label: donvis[i].data, 
                 lazy: true, 
                 id: id,
                 parent_id: parent_id,
            done(treeNodes ) //Draw tree
            this.treeChange++; //Marking tree change
            return null;

    Watch varible for tree change and load lazy tree in order

     watch: {
        treeChange: function(){
          this.$nextTick(function () { //Wait until all child component render
            let rootId = this.rootId      
            if(this.firstLoadTree == true){ //If first load Tree 
              this.firstLoadTree = false;
              if(this.currentLoadNode.length > 0){ 
                if( this.currentLoadNode[0] == rootId){ //if firstnode == root, expand first and remove first node
                  this.$refs.tree.setExpanded(rootId, true); //Expand tree first, then remove first               
                }else{ //empty current loadNode array set then expand root if first loadnode not root
                  this.currentLoadNode = []; 
                  this.$refs.tree.setExpanded(rootId, true); 
              }else{ //if there is no load node, just load the root
                this.$refs.tree.setExpanded(rootId, true);
            }else{ //Second and after lazy load when first node is root
              if(this.currentLoadNode.length > 0){ 
                  this.$refs.tree.setExpanded(this.currentLoadNode[0], true); 
        },//end treeChange watch


    Above just proof of concept, we need to do more:

    • Save lazy node to cookie or store
    • Load from cookie, store
    • Create iniTree switch to deferentiate between normal lazy load or tree inits node (from loadNode) and normal user click to decide save node to cookie or store


    QTree add attribute like “lazy node” and we simply put array here for lazy loading node in order

  • This post is deleted!

Log in to reply