vyt

vue-y-tree

yet another flexible tree component for vue

Showing:

Popularity

Downloads/wk

4

GitHub Stars

4

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Tree

Readme

vue-y-tree

Yet another tree component for vue

Demo

Install

vue-y-tree is a UMD module, it means:

  • you can use it as an npm package
  • or you can load it directly in browser, and access it with the global variable VueTree
npm install vue-y-tree

Usage

<body style="background: #fff">
  <div>selected: {{ text }}</div>
  <hr/>
  <tree :tree="tree" :display-args="args" @tree-select="onSelect"></tree>
</body>

// directly used in browser
// var yTree = VueTree.yTree;

var yTree = require('vue-y-tree').yTree;

new Vue({
    el: 'body',
        components: {
        tree: yTree
    },
    methods: {
        onSelect: function (data) {
        this.text = data;
      }
    },
    data: function () {
        return {
        text: 'none',
        tree: {
            value: 'level 1',
          children: [
            {
                value: 'level 2 A'
            },
            {
                value: 'level 2 B',
              children: [
                { value: 'level 3 A'},
                { value: 'level 3 B'},
                { value: 'level 3 C'}
              ]
            }
          ]
        },
        args: {
            valueToString: x => x
        }
      }
    }
})

Tips

Two vue components are exported in vue-y-tree:

  • xTree
    • the more general tree component, including recursive render, fold/unfold and select, but without any css
  • yTree
    • wrap xTree with a little more fancy display

xTree is implemented with flexibility. It is all about how to interact with a tree, but it doesn't care how to display your tree node. You can pass in your own component to display whatever exists in your tree data (checkout the dom tree demo).

Use yTree if you just want to display normal text in each tree node, while it is recommended to use xTree if you have a complex data structure and want to customize the display.

Props

xTree

NametyperequireddefaultDescription
treeObjecttruetree data to be rendered
childrenNameStringfalse'children'the children key in the tree data
valueNameStringfalse'value'the children key in the tree data
idNameStringfalsethe key to determine whether one node is selected, could be omitted. If omitted, all nodes will be assigned a unique id.
isFoldBooleanfalsefalsewhether a tree is folded in the first place
isSelectedBooleanfalsefalsewhere a tree is selected in the first place
displayComponentObjectfalsethe Component to display tree value
displayArgsObjectfalseextra args to be passed to displayComponent
extraClassStringfalseextra class to be added on the root element, use it for your own css
treeStyleObjectfalse{}customized inline style for the tree

displayComponent

Your customized displayComponent will get the following props:

NametypeDescription
valueObject, Stringthe value to be displayed
toggleFoldFunction(no args) the method to fold/unfold the whole tree
selectFunction(no args) the method to select the tree node
isRootBooleanwhether the node is a root node or not
isFoldBooleanwhether the node is folded or not
isSelectedBooleanwhether the node is selected or not
hasChildrenBooleanwhether the node has children or not
argsObjectthe extra args passed from xTree's displayArgs

yTree

props of yTree is almost the same as xTree, expect that there is no more displayComponent. yTree has already set the displayComponent for you, all you need is to pass in the displayArgs. so, let's get some insights of the displayArgs for yTree.

var displayArgs = {
  // a function turning tree value to string text to display
  valueToString: function (value) {
    return some_function(value);
  },

  // a display component that accept tree value as props 
  valueToDisplay: component      
}

valueToDisplay

Your customized valueToDisplay will get the following props:

NametypeDescription
valueObject, Stringthe value to be displayed
selectFunction(no args) the method to select the tree node
isRootBooleanwhether the node is a root node or not
isFoldBooleanwhether the node is folded or not
isSelectedBooleanwhether the node is selected or not
hasChildrenBooleanwhether the node has children or not

Dev

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Licence

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial