vue-tree-list2 v1.5.11

vue-tree-list2

A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging. Editable is fixed. not drag in editable.

if want hide icons

Live Demo

install

Install the plugin then you can use the component globally.

import Vue from 'vue'
import VueTreeList from 'vue-tree-list2'

Vue.use(VueTreeList)

Or just register locally like the example below.

use

npm install vue-tree-list2

<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="addTreeNodeIcon">📂</span>
      <span class="icon" slot="addLeafNodeIcon">＋</span>
      <span class="icon" slot="editNodeIcon">📃</span>
      <span class="icon" slot="delNodeIcon">✂️</span>
      <span class="icon" slot="leafNodeIcon">🍃</span>
      <template v-slot:treeNodeIcon="slotProps">
          <div class="icon pl-4 pr-2" v-if="slotProps.model.children && slotProps.model.children.length > 0">
              //no extended icon
              <vs-icon icon="keyboard_arrow_right" class="icon-style" v-if="!slotProps.expanded"/>
              //extended icon
              <vs-icon icon="keyboard_arrow_down" class="icon-style" v-if="slotProps.expanded"/>
          </div>
          //no child icon
          <vs-icon v-else icon="fiber_manual_record" class="icon-style"/>
        </template>
      </vue-tree-list>

    </vue-tree-list>
    <button @click="getNewTree">Get new tree</button>
    <pre>
      {{newTree}}
    </pre>
  </div>
</template>

<script>
  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list2'
  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, toogle) {
        console.log(params)
        //if want toogle node status
        //toogle();
      },

      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)
      }
    }
  }
</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

props of TreeNode

attributes

methods

events

customize operation icons

The component has default icons for addTreeNodeIcon, addLeafNodeIcon, editNodeIcon, delNodeIcon, leafNodeIcon, treeNodeIcon button, but you can also customize them and can access model, root, expanded as below:

<template v-slot:addTreeNodeIcon="slotProps">
  <span class="icon">📂</span>
</template>
<template v-slot:addLeafNodeIcon="slotProps">
  <span class="icon">＋</span>
</template>
<template v-slot:editNodeIcon="slotProps">
  <span class="icon">📃</span>
</template>
<template v-slot:delNodeIcon="slotProps">
  <span class="icon">✂️</span>
</template>
<template v-slot:leafNodeIcon="slotProps">
  <span class="icon">🍃</span>
</template>
<template v-slot:treeNodeIcon="slotProps">
  <span class="icon">
    {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ?
    '🌲' : '' }}</span
  >
</template>

#add-child-leaf and add-child-tree event Example

<vue-tree-list :add-manuel-node="true" @add-child-tree="addManuelTreeNode">
  <template v-slot:addTreeNodeIcon="slotProps">
    <span class="icon">📂</span>
  </template>
  <template v-slot:addLeafNodeIcon="slotProps">
    <span class="icon">＋</span>
  </template>
  <template v-slot:editNodeIcon="slotProps">
    <span class="icon">📃</span>
  </template>
  <template v-slot:delNodeIcon="slotProps">
    <span class="icon">✂️</span>
  </template>
  <template v-slot:leafNodeIcon="slotProps">
    <span class="icon">🍃</span>
  </template>
  <template v-slot:treeNodeIcon="slotProps">
    <span class="icon">
      {{ slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded ?
      '🌲' : '' }}</span
    >
  </template>
</vue-tree-list>

methods:
  addManuelTreeNode(addMethod,clickModel)
  {
      //learn current data info with "this.data"
      addMethod('Test Node name', {
        dragDisabled: false,
        addTreeNodeDisabled: false,
        addLeafNodeDisabled: false,
        editNodeDisabled: false,
        delNodeDisabled: false,
        id: '123123'
      })
  }