树状导航

https://www.vue365.cn/menu-navigation-plugins/

　　

• main

import VJstree from 'vue-jstree'
Vue.use(VJstree)

　　

<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 !')
    }
  }
})