vue3-tree

Slots

Slots are a feature that we recursively add to the tree structure.

  • We added
    • 2 icons by default based on tree open or closed status.
    • 1 slot according to the deletion process.
    • 1 slot to customize the checkbox.
    • 1 slot to customize the child count.

If you want to customize it, it is enough to put your own icons instead of these slots.

Example

Expanded Icon

<template #iconActive>
  <custom-active-icon />
</template>
1
2
3
<template #iconInactive>
  <custom-inactive-icon />
</template>
1
2
3

Delete Icon

<template #deleteIcon>
  <custom-delete-icon />
</template>
1
2
3

Checkbox

<template #checkbox="{ id, checked, node, indeterminate, toggleCheckbox }">
  <custom-checkbox
    :checked="checked"
    :indeterminate="indeterminate"
    @click="toggleCheckbox"
  />
</template>
1
2
3
4
5
6
7

Child Count

<template #childCount="{ count, checkedCount, childs }">
  <div class="custom-child-count">
    {{`${checkedCount}/${count}`}}
  </div>
</template>
1
2
3
4
5