The Finder
component requires a tree
prop, for example:
const tree = {
id: "root",
children: [
{
id: "fruits",
label: "Fruits",
children: [
{ id: "apple", label: "Apple" }
// ...
]
},
{
id: "vegetables",
label: "Vegetables",
children: [
{ id: "bean", label: "Beans" }
// ...
]
}
]
};
You can enable the selection of items with selectable
:
<Finder :tree="tree" :selectable="true"></Finder>
All items are then selectable by default, but you can prevent the selection of a given item by setting selectable: false
:
{
id: "vegetables",
label: "Vegetables",
selectable: false
}
You can filter displayed items by defining the filter
prop:
<Finder :tree="tree" :filter="filter"></Finder>
Where filter
is a Function
that takes an item as argument, and should return true
if this item must be displayed.
const filter = item => item.id === "apple";
You can enable the drag and drop of items with dragEnabled
:
<Finder :tree="tree" :dragEnabled="true"></Finder>
You can show handles to drag items with hasDragHandle
:
If you want to enable the drag of only some items, you can set a function as dragEnabled
prop:
const dragEnabled = item => item.movable;