https://github.com/weibangtuo/vue-tree

A tree component
https://github.com/weibangtuo/vue-tree

Last synced: 3 months ago
JSON representation

A tree component

• Host: GitHub
• URL: https://github.com/weibangtuo/vue-tree
• Owner: weibangtuo
• License: mit
• Created: 2016-10-20T15:08:21.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-26T03:14:06.000Z (almost 8 years ago)
• Last Synced: 2024-08-02T09:24:03.492Z (6 months ago)
• Language: JavaScript
• Homepage: https://weibangtuo.github.io/vue-tree/demo/demo-vue2.html
• Size: 5.86 KB
• Stars: 82
• Watchers: 12
• Forks: 23
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-tree - tree?style=social) - vue树视图组件 (UI组件)
• awesome-github-vue - vue-tree - vue树视图组件 (UI组件)
• awesome-github-vue - vue-tree - vue树视图组件 (UI组件)
• awesome - vue-tree - vue树视图组件 (UI组件)

README

        
# Vue Tree View Component

  Support `Vue.js` 2.0+

## Usage

Add the following required resources.

```html

```

Add the component in your vue view.

```html



    



    new Vue({

        el: '#app',

        data: {

            option: {

                root: { //Root Node, see Node Options

                    name: 'Root Node',

                    isParent: true,

                    isOpen: true,

                    children: []

                }

            }

        }

```

## Node Options

  `[opt]` means optional property.

```javascript

{

  name: 'Node Name',

  title: 'Node Tag title attr',

  isParent: true, // Requested for parent node

  isOpen: false, // [opt] Control node to fold or unfold

  icon: 'fa fa-folder', //[opt] Icon class name

  openedIcon: 'fa fa-folder-open', // [opt] For parent. Show when isOpen == true, show icon if it's null or empty 

  closedIcon: 'fa fa-folder', // [opt] For parent. Show when isOpen != true, show icon if it's null or empty 

  children: [], // Requested for parent node

  buttons: [ // [opt]

    {

      title: 'icon button tag title attr', //[opt]

      icon: 'fa fa-edit',

      click: function (node) { //[opt]

          //

      }

    }

    //...

  ],

  showLoading: false, // [opt] For parent, when `node.showLoading && node._loading` and node is opened then show loading icon

  onOpened: function (node) {}, // [opt]

  onClosed: function (node) {} // [opt]

}

```

## License

Copyright (c) 2016 weibangtuo. Under MIT License.