Feature: sublabels / option slots

[ernestoalejo]

I would like to customize the options adding a new gray sublabel, like count but with my own text. The best solution would probably be a slot that allows the users of this component to change the labels with our own custom HTML:

<treeselect ...>
  <template slot="option" slot-scope="option">
    {{option.label}}
    ...other things i want to customize the label with here...
  </template>
</treeselect>

You can provide a default slot implementation as a fallback, so it's a completely backwards compatible change and only adds new functionality.

[riophae]

I totally agree. Thanks for your feedback!

[riophae]

Hey, I just added the slot. It would be like this to use it:

<treeselect ...>
  <template slot="option" slot-scope="{ option }">
    {{option.label}}
    ...other things i want to customize the label with here...
  </template>
</treeselect>

Note that, slot-scope="{ option }" used destructuring. The option variable provides a lot of properties (e.g. isBranch, isLeaf, ancestors, level, ...etc) for your template to consume. You can also use option.raw to access the original option data you passed to the component.

Another thing worth noting is that, since the count text is implemented in the fallback content, if you customized the slot then you have to implement the count text yourself too if you are using it.

Do you think the API design fits your needs? Any suggestions are welcome!

[anfinil]

Any chance to release a new version?

[riophae]

@anfinil I'm sorry, it's not done yet :(

[riophae]

Hi, really sorry it took too long to have this feature finished. Just to let you know I just shipped it in v0.0.7.