Vue.js 2应用程序的交互式树结构组件。

安装和下载：

# NPM
$ npm install vue-jstree --save

用法：

安装并导入树视图组件。

import VJstree from 'vue-jstree'

创建一个新的树视图。

<v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>

new Vue({
  data: {
    data: [
      {
        "text": "Same but with checkboxes",
        "children": [
          {
            "text": "initially selected",
            "selected": true
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-danger"
          },
          {
            "text": "initially open",
            "icon": "fa fa-folder icon-state-default",
            "opened": true,
            "children": [
              {
                "text": "Another node"
              }
            ]
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-warning"
          },
          {
            "text": "disabled node",
            "icon": "fa fa-check icon-state-success",
            "disabled": true
          }
        ]
      },
      {
        "text": "Same but with checkboxes",
        "opened": true,
        "children": [
          {
            "text": "initially selected",
            "selected": true
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-danger"
          },
          {
            "text": "initially open",
            "icon": "fa fa-folder icon-state-default",
            "opened": true,
            "children": [
              {
                "text": "Another node"
              }
            ]
          },
          {
            "text": "custom icon",
            "icon": "fa fa-warning icon-state-warning"
          },
          {
            "text": "disabled node",
            "icon": "fa fa-check icon-state-success",
            "disabled": true
          }
        ]
      },
      {
        "text": "And wholerow selection"
      }
    ]
  },
  methods: {
    itemClick (node) {
      console.log(node.model.text + ' clicked !')
    }
  }
})

Props ：

props: {
  data: {type: Array},
  size: {type: String, validator: value => ['large', 'small'].indexOf(value) > -1},
  showCheckbox: {type: Boolean, default: false},
  wholeRow: {type: Boolean, default: false},
  noDots: {type: Boolean, default: false},
  multiple: {type: Boolean, default: false},
  allowBatch: {type: Boolean, default: false},
  textFieldName: {type: String, default: 'text'},
  valueFieldName: {type: String, default: 'value'},
  async: {type: Function},
  loadingText: {type: String, default: 'Loading...'},
  draggable: {type: Boolean, default: false},
  klass: String
},

---

官网：https://github.com/zdy1988/vue-jstree

GitHub下载：https://github.com/zdy1988/vue-jstree/archive/master.zip