How to use ztree in vue

Let’s introduce the combination of vue ztree to you below, let’s take a look!

Configuration

Package and download jquery and ztree

 "dependencies": {
  "element-ui": "^2.1.0",
  "vue": "^2.5.2",
  "axios": "^0.16.1",
  "jquery":"3.3.1",
  "vue-awesome":"2.3.4",
  "ztree":"3.5.24"
 },

Automatically load jquery

When the project is built, jquery is automatically loaded and output to jQuery. jQuery will be used in ztree.

plugins: [
  new ({
   jQuery:'jquery',
   $:'jquery',
  })
 ]

import jquery and ztree

import 'jquery'
 import 'ztree'
 import 'ztree/css/metroStyle/'

Call ztree to span the tree structure

export default {
  data() {
   return {
    nodeData: [{
     name: "Parent Node 1", children: [
      {name: "Sub Node 1"},
      {name: "Sub Node 2"}
     ]
    }],
    setting:{
     view: {
      showLine: false
     },
     data: {
      simpleData: {
       enable: true
      }
     },
     callback: {
      onClick: 
     }
    }
   }
  },
  mounted(){
   let nodeData = 
   $.($("#uploadtree"), , nodeData);
  }
 }

Summarize

The above is how to use ztree in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!