Tree component - use different names for label and children



  • I’m trying to use the output of d3.nest() to populate my tree - but it appears the tree can only use a property named label and children, rather than the key and values that d3.nest() outputs?
    Is there a simple way to do this?



  • Hi @MarkStacey you can use slots for that.

    <div slot='header-generic' slot-scope='prop' class='row items-center'>
          <span>{{ prop.node.name }}</span>
     </div>
    

    I’ve also created custom filter to search by node.name and by user full name…

    treeFilter (node, filter) {
          const filt = filter.toLowerCase()
          const nodeNameMatch = node.name && node.name.toLowerCase().indexOf(filt) > -1
          const usersMatch = node.users.filter(user => (user.full_name.toLowerCase().indexOf(filt) > -1)).length > 0
    
          return nodeNameMatch || usersMatch
        },
    

    http://quasar-framework.org/components/tree.html#Customizing-nodes-header-and-body-slots


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.