vue-halower-tree v1.1.0

Version: 2.0  (中文文档)

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

Node Property

Tree Property

method

How to use

Step1: install plugins

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-halower-tree --save

Step2： In your main.js

import VTree from 'vue-halower-tree'

Vue.use(VTree)

Step3: In your .babelrc

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

Demo

Html

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

JS

export default {
  name: 'HelloWorld',
  data () {
    return {
      searchword: '',
      treeData: [{
        title: 'First-level nodes',
        expanded: true,
        children: [{
          title: 'Level Two Node 1',
          expanded: true,
          children: [{
            title: 'Level Three node 1-1'
          }, {
            title: 'Level Three node 1-1'
          }, {
            title: 'Level Three node 1-1'
          }]
        }, {
          title: 'Level Two Node 2',
          children: [{
            title: "<span style='color: red'>Level Three node 2-1</span>"
          }, {
            title: "<span style='color: red'>Level Three node 2-2</span>"
          }]
        }]
      }]
    }
  },
  methods: {
    tpl (node, ctx) {
      let titleClass = node.selected ? 'node-title node-selected' : 'node-title'
      if (node.searched) titleClass += ' node-searched'
      return <span>
        <button style='color:blue; background-color:pink' onClick={() => this.$refs.tree.addNode(node, {title: 'Synchronous loading'})}>+</button>
      <span class={titleClass} domPropsInnerHTML={node.title} onClick={() => {
        ctx.parent.nodeSelected(ctx.props.node)
        console.log(ctx.parent.getSelectedNodes())
      }}></span>
      <button style='color:green; background-color:pink' onClick={() => this.asyncLoad(node)}>Asynchronous loading</button>
      <button style='color:red; background-color:pink' onClick={() => this.$refs.tree.delNode(node.parent, node)}>Delete</button>
      </span>
    },
    async asyncLoad (node) {
      this.$refs.tree.addNodes(node, await this.$api.demo.getChild())
    },
    search () {
      this.$refs.tree.searchNodes(this.searchword)
    }
  }
}

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