halower/vue-tree

tree and multi-select component based on Vue.js 2.0

Description

Tree component based on Vue.js 2.0

Demo: http://120.77.84.4/

Programming language: Vue

License: MIT License

Tags: Frameworks     Testing Frameworks     Tree     vue     Treeview    

Latest version: v2.1.5

README

The document is poorly written and you are welcome to refine your documentation in the process of using it to better help others.

Version: 2.x  (中文文档)

QQ Group: 255965810 we guess you may also see version 1.0

Online Demo

https://halower.github.io/vue-tree

SelectTree API

The latest release has the ability to support the dropdown tree, extending the following with the same basic attributes and events (consistent with the Tree API)

Parameters	Description	Type	Optional value	Default value
searchable	Search Functionality Required	Boolean	Y	true
pleasechoosetext	Dropdown box default prompts this article	String	Y	Please choose ...
searchtext	Search box default prompts this article	String	Y	Search ...
searchfilter	Custom search pull down tree filter function	Function	Y	node => node.title.indexOf (This.searchworld) > 1

## Effect Chart (no demo here, other effects like Onlinedemo)

How to use

Please read the Tree API documentation before using the selectTree

import { VTree, VSelectTree } from 'vue-tree-halower'
Vue.use (VTree)
Vue.use (VSelectTree)
 -------------------
<v-select-tree :data='treeData' v-model="['node-1-2']"/>

Tree API Doc

Node Property

Parameters	Description	Type	Optional values	Default value
id	when this property is empty, the title property will be used as the key	String	Y	-
title	node name	String	N	-
children	child nodes	Array[object]	Y	-
async	whether to load child nodes asynchronously	Boolean	Y	false
expanded	node Expansion	Boolean	Y	false
halfcheck	whether the node is half optional (subordinate selected)	Boolean	Y	false
visible	is the node visible	Boolean	Y	true
selected	whether the node is selected	Boolean	Y	false
checked	whether the node check box is selected	Boolean	Y	false
nocheck	specifies that a node does not render check box when multiple checkboxes are open	Boolean	Y	false
loading	open load effect	Boolean	Y	false
chkDisabled	disable the function of a check box for a node	Boolean	Y	false
hasExpanded	node has expanded	Boolean	Y	false
parent	get parent node(when allowGetParentNode=true,the node will add parentmethod))	Function	-	undefined
selDisabled	disable the select function of a node	Boolean	Y	false

Tree Property

Parameters	Description	Type	Optional values	default value
data	tree Data Source	Array[object]	N	-
multiple	turn on Check mode	Boolean	Y	false
tpl	custom templates	JSX	Y	false
halfcheck	turn on semi-select mode	Boolean	Y	select all
scoped	quarantine node Selected state	Boolean	Y	false
draggable	support drag?	Boolean	Y	false
dragafterexpanded	ro expand after dragging	Boolean	Y	true
canDeleteRoot	can delete the root node	Boolean	Y	false
maxLevel	node max level	Number	Y	1024
topMustExpand	the top level must can expand	Boolean	Y	true
allowGetParentNode	allow get the parent node	Boolean	Y	false
radio	the selected node only one	Boolean	Y	false
selectAlone	select is alone	Boolean	Y	false

method

Method name	Description	Parameters
getSelectedNodes	returns an array of currently selected nodes,isOriginal:false,	isOriginal: Boolean, ignoreInvisibleNode: Boolean
getCheckedNodes	returns the array of nodes selected by the current check box	isOriginal: Boolean,ignoreInvisibleNode: Boolean
getNodes	the options objects such as {selected:true}, if empty, use {}	options: Object,data: Array, isOriginal: Boolean, ignoreInvisibleNode: Boolean
searchNodes	filter:function/string (if it is a function, it will eventually return a Boolean type)	node
nodeSelected	to select a node	node: Object
addNode	add a node	parentNode: Object, node: Object
addNodes	add some nodes	parentNode: Object, nodes: Array

events

Event name	Description	Parameters
node-click	click the node to trigger the event	node: Object
node-select	click the select to trigger the event	node: Object, selected: boolean, position: {level, index}
node-check	click the checkbox to trigger the event	node: Object, checked: boolean, position: {level, index}
node-mouse-over	over the node to trigger the event	node: Object, index: Number, parentNode: node, position: {level, index}
async-load-nodes	event used to implement asynchronous loading	node: Object
drag-node-end	drag node end trigger the event	{dragNode: Object, targetNode: Object}
del-node	after delete a node	{ parentNode: Object
node-expand	click the expand to trigger the event	node: Object, expand: boolean, position: {level, index}

How to use

Step1: install plugins (Vue Cli3 not necessary, Demo based on VueCli3)

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev

npm install vue-tree-halower  --save

Step2: In your .babelrc (Vue Cli3 not necessary,Demo based on VueCli3)

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

Step3： In your main.js

import 'vue-tree-halower/dist/halower-tree.min.css' // you can customize the style of the tree
import VTree from 'vue-tree-halower'

Vue.use(VTree)

Demo

Html

  <div class="tree">
    <input class="tree-search-input" type="text" v-model.lazy="searchword" placeholder="search..."/>
    <button class=" tree-search-btn" type="button" @click="search">GO</button>
    <v-tree ref='tree' :data='treeData' :multiple="true" :tpl='tpl' :halfcheck='true' />
  </div>

JS

export default {
  name: 'HelloWorld',
  data () {
    return {
      searchword: '',
      initSelected: ['node-1'],
      treeData1: [{
        title: 'node1',
        expanded: true,
        children: [{
          title: 'node 1-1',
          expanded: true,
          children: [{
            title: 'node 1-1-1'
          }, {
            title: 'node 1-1-2'
          }, {
            title: 'node 1-1-3'
          }]
        }, {
          title: 'node 1-2',
          children: [{
            title: "<span style='color: red'>node 1-2-1</span>"
          }, {
            title: "<span style='color: red'>node 1-2-2</span>"
          }]
        }]
      }],
      treeData2: [{
        title: 'node1',
        expanded: false,
        async: true
      }],

      treeData3: [{
        title: 'node1',
        expanded: true,
        children: [{
          title: 'node 1-1',
          expanded: true,
          children: [{
            title: 'node 1-1-1'
          }, {
            title: 'node 1-1-2'
          }, {
            title: 'node 1-1-3'
          }]
        }]
      }]
    }
  },
  methods: {
    // tpl (node, ctx, parent, index, props) {
    tpl (...args) {
      let {0: node, 2: parent, 3: index} = args
      let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
      if (node.searched) titleClass += ' node-searched'
      return <span>
        <button class="treebtn1" onClick={() => this.$refs.tree.addNode(node, {title: 'sync node'})}>+</button>
         <span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
           this.$refs.tree.nodeSelected(node)
         }}></span>
      <button class="treebtn2" onClick={() => this.asyncLoad(node)}>async</button>
      <button class="treebtn3" onClick={() => this.$refs.tree.delNode(node, parent, index)}>delete</button>
      </span>
    },
    async asyncLoad (node) {
      this.$set(node, 'loading', true)
      let pro = new Promise(resolve => {
        setTimeout(resolve, 2000, ['async node1', 'async node2'])
      })
      this.$refs.tree1.addNodes(node, await pro)
      this.$set(node, 'loading', false)
    },
    search () {
      this.$refs.tree.searchNodes(this.searchword)
    }
  }
}
</script>

如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励