Reference resources: Official documents

Install vue-ztree:

npm install  vue-ztree-2.0

main.js introduces vue-ztree:

import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js'
import 'vue-ztree-2.0/dist/vue-ztree-2.0.css'

Vue.use(vueztree)

app.js implements vue-ztree:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <div style='width:280px;'>
      <vue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='false'></vue-ztree>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue-Ztree-2.0!',
      ztreeDataSource: []
    }
  },
  created:function(){
    this.getData();
  },
  methods:{
    // Click node
    nodeClick:function(m){
       console.log(JSON.parse(JSON.stringify(m)));
    },
    // Right click event
    contextmenuClick:function(m){
       console.log(m)
       console.log("Triggered custom contextmenuClick Event");
    },
    // Click to expand and close
    expandClick:function(m){
       console.log(JSON.parse(JSON.stringify(m)));
       // Click Asynchronous Loading
       if(m.isExpand) {
          // Loading sub-nodes dynamically to simulate ajax request data
         // Please note that id cannot be repeated.
         if(m.hasOwnProperty("children")){
            
            m.loadNode = 1; // Loading node

            setTimeout(()=>{
              
              m.loadNode = 2; // Node loaded

              m.isFolder = !m.isFolder; 
            },1000)
            
         }
       }
    },

    getData(){
      var api = 'http://localhost:8080/area/list';
      this.$http.get(api).then(function(response){
        console.log(response);
        this.ztreeDataSource = response.body;
      },function(error){
        console.log("Failed to get tree data!!!");
      })
    }
  }
}
</script>

<style>
body {font-family: Helvetica, sans-serif;}
</style>

vue-ztree/initialization parameter

parameter	type	Default value	describe
list	Array	-	Tree Structural Data Source
func	Function	-	Click on Node Events
contextmenu	Function	-	Right-click node event
expand	Function	-	Click on the expansion/collection method (usually used when loading asynchronously, non-asynchronous loading passes null)
is-open	Bealoon	true	Whether to expand the tree or not

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

If the startup port number conflicts, you can modify the port number in "config -> index. js":

Demo code (including front-end and back-end)