Vue.js Tree List Component

Vue.js Tree List Component

A vue component for tree structure that supports adding live editing and dragging/sorting.

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

<template>
    <div>
        <button @click="addNode">Add Node</button>
        <vue-tree-list
          @click="onClick"
          @change-name="onChangeName"
          @delete-node="onDel"
          @add-node="onAddNode"
          :model="data"
          default-tree-node-name="new node"
          default-leaf-node-name="new leaf"
          v-bind:default-expanded="false">
          <span class="icon" slot="addTreeNode">addTreeNode</span>
          <span class="icon" slot="addLeafNode">addLeafNode</span>
          <span class="icon" slot="editNode">editNode</span>
          <span class="icon" slot="delNode">delNode</span>
        </vue-tree-list>
        <button @click="getNewTree">Get new tree</button>
        <pre>
          {{newTree}}
        </pre>
    </div>
</template>
<script>
  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
  export default {
    components: {
      VueTreeList
    },
    data () {
      return {
        newTree: {},
        data: new Tree([
          {
            name: 'Node 1',
            id: 1,
            pid: 0,
            dragDisabled: true,
            addTreeNodeDisabled: true,
            addLeafNodeDisabled: true,
            editNodeDisabled: true,
            delNodeDisabled: true,
            children: [
              {
                name: 'Node 1-2',
                id: 2,
                isLeaf: true,
                pid: 1
              }
            ]
          },
          {
            name: 'Node 2',
            id: 3,
            pid: 0,
            disabled: true
          },
          {
            name: 'Node 3',
            id: 4,
            pid: 0
          }
        ])
      }
    },
    methods: {
      onDel (node) {
        console.log(node)
        node.remove()
      },

      onChangeName (params) {
        console.log(params)
      },

      onAddNode (params) {
        console.log(params)
      },

      onClick (params) {
        console.log(params)
      },

      addNode () {
        var node = new TreeNode({ name: 'new node', isLeaf: false })
        if (!this.data.children) this.data.children = []
        this.data.addChildren(node)
      },

      getNewTree () {
        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)
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .vtl {
    .vtl-drag-disabled {
      background-color: #d0cfcf;
      &:hover {
        background-color: #d0cfcf;
      }
    }
    .vtl-disabled {
      background-color: #d0cfcf;
    }
  }
</style>

<style lang="less" rel="stylesheet/less" scoped>
  .icon {
    &:hover {
      cursor: pointer;
    }
  }
</style>

props

props of vue-tree-list

name type default description
model TreeNode - You can use const head = new Tree([]) to generate a tree with the head of TreeNode type
default-tree-node-name string New node node Default name for new treenode
default-leaf-node-name string New leaf node Default name for new leafnode
default-expanded boolean true Tree is expanded or not

props of TreeNode

attributes

name type default description
id string, number current timestamp The node's id
isLeaf boolean false The node is leaf or not
dragDisabled boolean false Forbid dragging tree node
addTreeNodeDisabled boolean false Show addTreeNode button or not
addLeafNodeDisabled boolean false Show addLeafNode button or not
editNodeDisabled boolean false Show editNode button or not
delNodeDisabled boolean false Show delNode button or not
children array null The children of node

methods

name params description
changeName name Change node's name
addChildren children: object, array Add children to node
remove - Remove node from the tree
moveInto target: TreeNode Move node into another node
insertBefore target: TreeNode Move node before another node
insertAfter target: TreeNode Move node after another node

events

name params description
click TreeNode Trigger when clicking a tree node
change-name {'id', 'oldName', 'newName'} Trigger after changing a node's name
delete-node TreeNode Trigger when clicking delNode button. You can call remove of TreeNode to remove the node.
add-node TreeNode Trigger after adding a new node
drop {'node', 'oldParent'} Trigger after dropping a node into another
drop-up {'node', 'oldParent'} Trigger after extracting a node from another

customize operation icons

The component has default icons for addTreeNode, addLeafNode, editNode, delNode button, but you can also customize them:

<span class="icon" slot="addTreeNode">addTreeNode</span>
<span class="icon" slot="addLeafNode">addLeafNode</span>
<span class="icon" slot="editNode">editNode</span>
<span class="icon" slot="delNode">delNode</span>

Github Repository

Tags: #VueJs