Socket
Socket
Sign inDemoInstall

vue-tree-list2

Package Overview
Dependencies
0
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-tree-list2

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


Version published
Weekly downloads
787
increased by35.46%
Maintainers
1
Install size
796 kB
Created
Weekly downloads
 

Readme

Source

Actions Status

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

vue-tree-demo.gif

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

nametypedefaultdescription
modelTreeNode-You can use const head = new Tree([]) to generate a tree with the head of TreeNode type
default-tree-node-namestringNew node nodeDefault name for new treenode
default-leaf-node-namestringNew leaf nodeDefault name for new leafnode
default-expandedbooleantrueTree is expanded or not
hide-add-leaf-iconbooleanfalseHide add leaf icon
hide-add-node-iconbooleanfalseHide add node icon
hide-delete-iconbooleanfalseHide delete node icon
hide-edit-iconbooleanfalseHide edit node icon
always-show-iconbooleanfalsecancel show hover (always show)
show-child-iconbooleantruedo active and passive childe icon
add-manuel-nodebooleanfalseuse "add-child-leaf" or "add-child-tree" event for add leaf or tree

props of TreeNode

attributes

nametypedefaultdescription
idstring, numbercurrent timestampThe node's id
isLeafbooleanfalseThe node is leaf or not
dragDisabledbooleanfalseForbid dragging tree node
addTreeNodeDisabledbooleanfalseShow addTreeNode button or not
addLeafNodeDisabledbooleanfalseShow addLeafNode button or not
editNodeDisabledbooleanfalseShow editNode button or not
delNodeDisabledbooleanfalseShow delNode button or not
childrenarraynullThe children of node

methods

nameparamsdescription
changeNamenameChange node's name
addChildrenchildren: object, arrayAdd children to node
remove-Remove node from the tree
moveIntotarget: TreeNodeMove node into another node
insertBeforetarget: TreeNodeMove node before another node
insertAftertarget: TreeNodeMove node after another node

events

nameparamsdescription
clickTreeNodeTrigger when clicking a tree node
change-name{'id', 'oldName', 'newName'}Trigger changing a node's name
changed-name{'id', 'newName'}Complate changing a node's name
delete-nodeTreeNodeTrigger when clicking delNode button. You can call remove of TreeNode to remove the node.
add-nodeTreeNodeTrigger after adding a new node
drop{node, src, target}Trigger after dropping a node into another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop into
drop-before{node, src, target}Trigger after dropping a node before another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop before
drop-after{node, src, target}Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after
add-child-leafFunction(name,options), addModelif add-manuel-node is true, this event triger for add leaf. Example in page down
add-child-treeFunction(name,options), addModelif add-manuel-node is true, this event triger for add tree node. Example in page down

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

Keywords

FAQs

Last updated on 29 Mar 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc