Giter VIP home page Giter VIP logo

vue-tree-list's Introduction

Actions Status

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

install

Install the plugin then you can use the component globally.

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

Vue.use(VueTreeList)

Or just register locally like the example below.

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"
    >
      <template v-slot:leafNameDisplay="slotProps">
        <span>
          {{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
        </span>
      </template>
      <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>
      <span class="icon" slot="treeNodeIcon">๐ŸŒฒ</span>
      <span class="icon" slot="additionalNodeIcons">-</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)
      }
    }
  }
</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;
    }
  }

  .muted {
    color: gray;
    font-size: 80%;
  }
</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, 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

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:leafNameDisplay="slotProps">
  <span>{{ slotProps.model.name }} #{{ slotProps.model.id }}</span>
</template>
<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's People

Contributors

2nthony avatar beyoursun avatar energiehund avatar herz3h avatar imtoori avatar lwtsde avatar paradeto avatar tristan-tsl avatar zoispag avatar zymawy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.