How to use ztree in vue

This article mainly introduces how to use ztree in vue, including configuring package.json and automatically loading jquery. This article introduces you to it in great detail and has reference value. Friends who need it can refer to it. I hope it can help. Everyone.

Configure package.json

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

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

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

import jquery and ztree

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

Call ztree to generate a tree structure

export default {
  data() {
   return {
    nodeData: [{
     name: "父节点1", children: [
      {name: "子节点1"},
      {name: "子节点2"}
     ]
    }],
    setting:{
     view: {
      showLine: false
     },
     data: {
      simpleData: {
       enable: true
      }
     },
     callback: {
      onClick: this.getFileDesc
     }
    }
   }
  },
  mounted(){
   let nodeData = this.nodeData
   $.fn.zTree.init($("#uploadtree"), this.setting, nodeData);
  }
 }

Related recommendations:

jQuery uses the zTree plug-in to implement draggable tree code sharing

jQuery plug-in zTree Achieve sharing of examples of obtaining first-level node data

Easily realize sharing of zTree usage examples in five steps

The above is the detailed content of How to use ztree in vue. For more information, please follow other related articles on the PHP Chinese website!