Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-tree-halower

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-tree-halower

This tree and treeSelect component is based on the Vue.js 2.0

  • 1.8.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12K
increased by1.29%
Maintainers
1
Weekly downloads
 
Created
Source

npm npm GitHub stars GitHub forks license

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 (2018-4-15)

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)

ParametersDescriptionTypeOptional valueDefault value
searchableSearch Functionality RequiredBooleanYtrue
pleasechoosetextDropdown box default prompts this articleStringYPlease choose ...
searchtextSearch box default prompts this articleStringYSearch ...
searchfilterCustom search pull down tree filter functionFunctionYNode => mode.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

ParametersDescriptionTypeOptional valuesDefault value
idwhen this property is empty, the title property will be used as the keyStringY-
titlenode nameStringN-
childrenchild nodesArray[object]Y-
asyncwhether to load child nodes asynchronouslyBooleanYfalse
expandednode ExpansionBooleanYfalse
halfcheckwhether the node is half optional (subordinate selected)BooleanYfalse
visibleis the node visibleBooleanYtrue
selectedwhether the node is selectedBooleanYfalse
checkedwhether the node check box is selectedBooleanYfalse
nocheckspecifies that a node does not render check box when multiple checkboxes are openBooleanYfalse
loadingopen load effectBooleanYfalse
chkDisableddisable the function of a check box for a nodeBooleanYfalse
hasExpandednode has expandedBooleanYfalse
parentget parent node(when allowGetParentNode=true,the node will add parentmethod))Function-undefined
selDisableddisable the select function of a nodeBooleanYfalse

Tree Property

ParametersDescriptionTypeOptional valuesdefault value
datatree Data SourceArray[object]N-
multipleturn on Check modeBooleanYfalse
tplcustom templatesJSXYfalse
halfcheckturn on semi-select modeBooleanYselect all
scopedquarantine node Selected stateBooleanYfalse
draggablesupport drag?BooleanYfalse
dragafterexpandedro expand after draggingBooleanYtrue
canDeleteRootcan delete the root nodeBooleanYfalse
maxLevelnode max levelNumberY1024
topMustExpandthe top level must can expandBooleanYtrue
allowGetParentNodeallow get the parent nodeBooleanYfalse
radiothe selected node only oneBooleanYfalse
selectAloneselect is aloneBooleanYfalse

method

Method nameDescriptionParameters
getSelectedNodesreturns an array of currently selected nodes,isOriginal:false,isOriginal: Boolean, ignoreInvisibleNode: Boolean
getCheckedNodesreturns the array of nodes selected by the current check boxisOriginal: Boolean,ignoreInvisibleNode: Boolean
getNodesthe options objects such as {selected:true}, if empty, use {}options: Object,data: Array, isOriginal: Boolean, ignoreInvisibleNode: Boolean
searchNodesfilter:function/string (if it is a function, it will eventually return a Boolean type)node
nodeSelectedto select a nodenode: Object
addNodeadd a nodeparentNode: Object, node: Object
addNodesadd some nodesparentNode: Object, nodes: Array

events

Event nameDescriptionParameters
node-clickclick the node to trigger the eventnode: Object
node-selectclick the select to trigger the eventnode: Object, selected: boolean, position: {level, index}
node-checkclick the checkbox to trigger the eventnode: Object, checked: boolean, position: {level, index}
node-mouse-overover the node to trigger the eventnode: Object, index: Number, parentNode: node, position: {level, index}
async-load-nodesevent used to implement asynchronous loadingnode: Object
drag-node-enddrag node end trigger the event{dragNode: Object, targetNode: Object}
del-nodeafter delete a node{ parentNode: Object
node-expandclick the expand to trigger the eventnode: 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>

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

FAQs

Package last updated on 13 Oct 2019

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc