Project-tree NPM

mm-tree

use

npm install project-tree

<template>
    <div>
        <button @click="addNode">Add Node</button>
        <project-tree
          @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="addLeafNode">addLeafNode</span>
          <span class="icon" slot="editNode">editNode</span>
          <span class="icon" slot="delNode">delNode</span>
        </project-tree>
        <button @click="getNewTree">Get new tree</button>
        <pre>
          {{newTree}}
        </pre>
    </div>
</template>
<script>
  import { ProjectTree, Tree, TreeNode } from 'project-tree'
  export default {
    components: {
      ProjectTree
    },
    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>

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>

#备注：改项目是在vue-tree-list包上面根据需求所做修改，原包地址https://github.com/ParadeTo/vue-tree-list，敬请谅解!

vue tree

cz-conventional-changelog

@everything-registry/sub-chunk-2479

1.0.0

5 years ago