amirkosari / vue3-tree-vue Goto Github PK

import 'vue3-tree-vue/dist/style.css'; // remember to add this in your component or maint.[ts/js]
 
  setup() {
    const onItemChecked = (checkedItems: TreeViewItem[]) => console.log(checkedItems);
    const onItemSelected = (item: TreeViewItem) => console.log(item);
    const onBeforeItemDropped = (droppedItem: TreeViewItem, dropHost: TreeViewItem | undefined) => {
      // dropHost == undefined means dropping at the root of the tree.
      
      // Here you can specify any kind of drop validation you will like.
      // this function should return true if the drop operation is valid.

      if (dropHost.type !== playlist) return false
      return true;
    }
    const onItemExpanded = (expandedItem: TreeViewItem) => {
      //to use this feature properly you need to set lazyLoad property as true 
      //fetch data
      const lazyLoadedItems = fetchFromApi(...);
      expandedItem.children.push(...lazyLoadedItems)
    }
    const items = ref<TreeViewItem[]>([]); // define your tree items here.
    
    return {
      onItemChecked,
      onItemSelected,
      onBeforeItemDropped,
      onItemExpanded,
      items
    }
  }

export interface TreeViewItem {
  name: string;
  id?: string | number;
  children?: TreeViewItem[];
  checked?: boolean;
  selected?: boolean;
  expanded?: boolean;
  disabled?: boolean;// When disabled, an item can neither be selected nor checked
  meta?: any;// provides meta-data of any type per node.
}