2018-03-07 21:39:46 +08:00
2018-02-11 21:35:53 +08:00
2018-02-11 21:35:53 +08:00
2017-07-23 10:35:20 +08:00
2018-02-11 21:35:53 +08:00
2017-07-22 00:13:14 +08:00
2017-07-22 00:13:14 +08:00
2017-07-23 10:35:20 +08:00
2018-02-11 21:37:56 +08:00
2018-03-07 21:39:46 +08:00

vue-tree-list

A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.

vue-tree-demo.gif

Live Demo

use

npm install vue-tree-list

<button @click="addNode">Add Node</button>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
  {{newTree}}
</pre>
...
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
export default {
    components: {
      VueTreeList
    },
    data () {
      return {
        isMobile: isMobile(),
        record: null,
        newTree: {},
        data: new Tree([
          {
            name: 'Node 1',
            id: 1,
            pid: 0,
            dragDisabled: true,
            children: [
              {
                name: 'Node 1-2',
                id: 2,
                isLeaf: true,
                pid: 1
              }
            ]
          },
          {
            name: 'Node 2',
            id: 3,
            pid: 0,
            dragDisabled: true
          },
          {
            name: 'Node 3',
            id: 4,
            pid: 0
          }
        ])
      }
    },
    methods: {
      addNode: function () {
        var node = new TreeNode({ name: 'new node', isLeaf: false })
        if (!this.data.children) this.data.children = []
        this.data.addChildren(node)
      },

      getNewTree: function () {
        var vm = this
        function _dfs (oldNode) {
          var newNode = {}

          for (var k in oldNode) {
            if (k !== 'children' && k !== 'parent') {
              newNode[k] = oldNode[k]
            }
          }

          if (oldNode.children && oldNode.children.length > 0) {
            newNode.children = []
            for (var i = 0, len = oldNode.children.length; i < len; i++) {
              newNode.children.push(_dfs(oldNode.children[i]))
            }
          }
          return newNode
        }

        vm.newTree = _dfs(vm.data)
      },

      onClick(model) {
        console.log(model)
      }
    }
}

props

default-tree-node-name

Default name for new treenode.

default-leaf-node-name

Default name for new leafnode.

events

click

<vue-tree-list @click="onClick" ...
...
onClick(model) {
  console.log(model)
}
...

Forbid dragging

Use dragDisabled to forbid dragging:

data: new Tree([
  {
    name: 'Node 1',
    id: 1,
    pid: 0,
    dragDisabled: true,
  ...
Description
🌲A vue component for tree structure
Readme 3.4 MiB
Languages
Vue 54.4%
JavaScript 43.8%
HTML 1.8%