search

sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.62k stars 1.34k forks source link

Nested submenus in dropdown options #1538

Open Sakthi002 opened 2 years ago

Sakthi002 commented 2 years ago

Currently Options value : [ { id : 1, name : 'test'}, { id : 2, name : 'test 1'}, ]

Behaviour : image

Expecting behaviour :

[ { id : 1, name : 'A',children : [{ id : 1, name : 'AA'},{ id : 2, name : 'AB'}]}, { id : 2, name : 'B', children : [{ id : 1, name : 'test'},{ id : 2, name : 'test 1'}]}, ]

image

Papooch commented 2 years ago

I guess this is already doable using the option slot by passing a custom template.

Sakthi002 commented 2 years ago

I guess this is already doable using the option slot by passing a custom template.

@Papooch please share some example code.

Papooch commented 2 years ago

Actually, I was thinking about it. What is the desired behavior here? Can you select a root node as the choice? Or are those only a separator? Should you be able to expand/collapse the nodes by clicking (that one would not be possible I guess)? Should all the root nodes still show up if none of their child nodes match?

Sakthi002 commented 2 years ago

Actually, I was thinking about it. What is the desired behavior here? Can you select a root node as the choice? Or are those only a separator? Should you be able to expand/collapse the nodes by clicking (that one would not be possible I guess)? Should all the root nodes still show up if none of their child nodes match?

Can you select a root node as the choice? - Yes Should you be able to expand/collapse the nodes by clicking - Yes

Papooch commented 2 years ago

I tried to put together a quick demo with the first feature: https://jsfiddle.net/5ea7zc8n/16/ It may be possible to add the collapsing with some events that modify the nodes array (like set collapsed = true) and make the search better by passing a callback function as options, but I hope you get the idea.

Sakthi002 commented 2 years ago

I tried to put together a quick demo with the first feature: https://jsfiddle.net/5ea7zc8n/16/ It may be possible to add the collapsing with some events that modify the nodes array (like set collapsed = true) and make the search better by passing a callback function as options, but I hope you get the idea.

Thank you very much @Papooch 👍 . i got some idea.