vue-tree

A Vue tree view component with stable DOM structure. By stable, it means the DOM structure will not change once it is rendered.

Demo

Performance Consideration

The DOM structure of this component doesn't change once rendered. Comparing to others using v-if, which generate sub-nodes while expanded. While working on long list of items, lags will be obvious.

• This component will have a lag when it is being rendered for the first time. After it is rendered, sub-trees are controlled by CSS, no DOM structure change.
• v-if components will lag whenever sub-trees are expanded, every time they are expanded.

There is an issue for this. Check out more detail there.

Props

Prop name	Description	Type	Default
item-id	Key of the field in item to be used as element's id attribute.	string	'id'
item-label	Key of the field in item that holds node label.	string	'name'
tags-key	Key of the field in item that holds tags array.	string	'tags'
children-key	Key of the field in item that holds child nodes array.	string	'children'
tag-id	Key of the field in tags list of item to be used as tag element's id attribute.	string	'id'
tag-label	Key of the field in tags list of item that holds tag label.	string	'label'
tag-hint	Key of the field in tags list of item that holds tag tooltip.	string	'hint'
checker	Whether to add a checkbox before each item, allowing multiple nodes tobe checked.	boolean	false
item	The tree data to be rendered. Please note that data passed may be mutated by this component to reflect various states of tree nodes. Mutated fields include: - checked - intermediate - rendered	G8TreeItem

Scoped slots

Default slot

<span class="g8-tree__node__entry__label">
  <slot :item="item">{{ item[itemLabel] }}</slot>
</span>

This is the entry's main content slot. Defaults to {{ item[itemLabel] }}. The current item entry is exposed as scoped variable item.

Tag (badge) slot

<label
  class="g8-tree__node__entry__tags__tag"
  v-for="(tag, idx) in item[tagsKey]"
  :key="idx"
  :id="tag[tagId]"
  :title="tag[tagHint]"
>
  <slot name="tag" :tag="tag" :item="item">{{ tag[tagLabel] }}</slot>
</label>

This is the entry's tag content slot. Defaults to {{ tag[tagLabel] }}. The current item entry is exposed as scoped variable item. The current tag is exposed as scoped variable tag.

Types

G8TreeItem

Below is a list of presumable fields, all of them are optional. You can place whatever data you want to a tree item, then use the props mentioned above to specify content you want to display.

Field name	Type	Description
name	string	Item name, serves as label, will be rendered as node label.
checked	boolean	Whether the node is checked.
intermediate	boolean	Intermediate check box state. Active while some children were checked.
rendered	boolean	Whether the sub-tree of this node has been rendered.
tags	G8TreeItemTag[]	List of tags.
children	G8TreeItem[]	List of child nodes.

G8TreeItemTag

Below is a list of presumable fields, all of them are optional. You can place whatever data you want to tags, then use the props mentioned above to specify content you want to display.

Field name	Type	Description
label	string	Tag label.
hint	string	Tag tooltip. Visible when mouse hovers on the tag.

G8ClickEvent

extends MouseEvent

Field name	Type	Description
data	{ expanded: boolean, item: G8TreeItem}	The item triggered the event and if it were expanded (true).

Events

This component defines only two events, for expanding/collapsing nodes, and checkbox state changes.

Event name	Type	Description
click	G8ClickEvent	A tree node has been clicked. Use the data.expanded to determine if the node were expanded (true).
state-changed	G8TreeItem	Checkbox state of the node has changed.

Other events

Theming

Colors

The bundled style sheet can be imported from 'g8-vue-tree/dist/g8-vue-tree.css'. This component provides a dark theme out of box. To use it, just add the g8--dark class to the element.

<ul class="g8-tree__view g8--dark">
  <g8-tree__view></g8-tree__view>
</ul>

If you want to change the color of the component, just define two variables before importing the scss file.

/* index.scss */

/* define these two variables before importing the scss file */
$g8-tree-bg: #ccc;
$g8-tree-fg: #333;

@import '~vue-tree/src/components/tree-view.scss';

Fonts

This component deliberately left out font-family from CSS. You can use whatever font you like, just add something like below to you styles:

.g8-tree__view {
  font-family: 'you favorite font';
}